<div id="slider1"></div>
<div id="slider2"></div>
<div id="slider3"></div>
<script>
var Slider = {
// Элемент
sliderElement: null,
// Привязывается к элементы и возвращает сам себя
load: function (element) {
this.sliderElement = element;
return this;
},
// Пример старта слайдера
start: function (text) {
this.sliderElement.innerHTML = text;
}
};
// 1
let Slider1 = Slider.load(document.getElementById("slider1"));
Slider1.start('раз');
// 2
let Slider2 = Slider.load(document.getElementById("slider2"));
Slider2.start('два');
// 3
let Slider3 = Slider.load(document.getElementById("slider3"));
Slider3.start('три');
</script>
.header-icon {
transform: translateY(0);
animation-iteration-count: infinite;
animation-fill-mode: forwards;
animation-duration: 6s;
}
.header-icon.first {
animation-name: mymove1;
}
.header-icon.two{
animation-name: mymove2;
}
.header-icon.three{
animation-name: mymove3;
}
@keyframes mymove1 {
0%, 20%, 40%, 60% {
transform: translateY(0);
}
10%, 30%, 50% {
transform: translateY(-60px);
}
}
@keyframes mymove2 {
0%, 20%, 40%, 60%, 80% {
transform: translateY(0);
}
30%, 50% {
transform: translateY(-60px);
}
}
@keyframes mymove3 {
0%, 20%, 40%, 60%, 80%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-60px);
}
}
# Drupal editor configuration normalization
# @see http://editorconfig.org/
# This is the top-most .editorconfig file; do not search in parent directories.
root = true
# All files.
[*]
end_of_line = LF
indent_style = space
indent_size = 2
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
[composer.json]
indent_size = 4