Автоматически обновляемый слайдер на CSS + JS
 | |
| Простой адаптивный jQuery слайдер, который автоматически производит прокрутку, где плавный переход с заданным отрезком времени просмотра. Трудно представить современный дизайн сайта без анимации, так как она безусловно улучшает стилистику интернет ресурса. Но и не нужно забывать, что это информация, если говорим про этот отзывчивый слайдер, то здесь по свой конструкций построен для того, чтоб его можно было поместить в каркас или блок на портале. Так как он адаптивный, то автоматически произойдет установка, не говоря о том, что перелистывая страницы и кадры, в аналогичной функции идет. Вам только остается задать скорость, и выставить ссылки на переход по материалу. Безусловно там ставят только актуальные новости, или тематические файлы. Также считаю, что слайдер для изображений является одним из популярных способов при достижении веб мастера. Здесь нет не каких кнопок внизу или по сторонам как все привыкли, так как все происходит на автомате. Как веб-разработчик вы выставляете интервал по времени, вам нужно. И производите установку, это можно на главной его увидеть или отвести отдельную страницу, сделать как портфолио, что не исключаю. Три потенциальных препятствий для вебмастеров: 1. Некоторые находят математику для создания ключевых кадров немного сложной, особенно когда слайдер показывает больше изображений. 2. Разработчики иногда забывают добавлять префиксы поставщика браузера. 3. Дублирование первого изображения в конце диафильма для создания плавного перехода иногда игнорируется, оставляя сломанную анимацию. Приступаем к установке: HTML Код <div id="dekasamicrogave-sautomatica"> <figure id="slidy"> <img src="http://zornet.ru/ABVUN/sarunolas/Gamilsatun/zornet_ru/eyes.jpg" alt="ZorNet - портал для вебмастера" > <img src="http://zornet.ru/ABVUN/sarunolas/Gamilsatun/zornet_ru/lou.jpg" alt="CSS" > <img src="http://zornet.ru/ABVUN/sarunolas/Gamilsatun/zornet_ru/lucie-2.jpg" alt="SEO" > <img src="http://zornet.ru/ABVUN/sarunolas/Gamilsatun/zornet_ru/lucie.jpg" alt="Дизайн" > </figure> </div> CSS Код body { background: #163250; } #dekasamicrogave-sautomatica { width: 38%; overflow: hidden; margin: 0 auto; } JS Код var timeOnSlide = 3, timeBetweenSlides = 1, animationstring = 'animation', animation = false, keyframeprefix = '', domPrefixes = 'Webkit Moz O Khtml'.split(' '), pfx = '', slidy = document.getElementById("slidy"); if (slidy.style.animationName !== undefined) { animation = true; } if( animation === false ) { for( var i = 0; i < domPrefixes.length; i++ ) { if( slidy.style[ domPrefixes[i] + 'AnimationName' ] !== undefined ) { pfx = domPrefixes[ i ]; animationstring = pfx + 'Animation'; keyframeprefix = '-' + pfx.toLowerCase() + '-'; animation = true; break; } } } if( animation === false ) { } else { var images = slidy.getElementsByTagName("img"), firstImg = images[0], imgWrap = firstImg.cloneNode(false); slidy.appendChild(imgWrap); var imgCount = images.length, totalTime = (timeOnSlide + timeBetweenSlides) * (imgCount - 1), slideRatio = (timeOnSlide / totalTime)*100, moveRatio = (timeBetweenSlides / totalTime)*100, basePercentage = 100/imgCount, position = 0, css = document.createElement("style"); css.type = "text/css"; css.innerHTML += "#slidy { text-align: left; margin: 0; font-size: 0; position: relative; width: " + (imgCount * 100) + "%; }\n"; css.innerHTML += "#slidy img { float: left; width: " + basePercentage + "%; }\n"; css.innerHTML += "@"+keyframeprefix+"keyframes slidy {\n"; for (i=0;i<(imgCount-1); i++) { position+= slideRatio; css.innerHTML += position+"% { left: -"+(i * 100)+"%; }\n"; position += moveRatio; css.innerHTML += position+"% { left: -"+((i+1) * 100)+"%; }\n"; } css.innerHTML += "}\n"; css.innerHTML += "#slidy { left: 0%; "+keyframeprefix+"transform: translate3d(0,0,0); "+keyframeprefix+"animation: "+totalTime+"s slidy infinite; }\n"; document.body.appendChild(css); } Есть отличный по материалу аргумент, это полная автоматизации всех действий с JavaScript. Результат анимации можно вывести при использовании CSS во всех современных браузерах. Демонстрация | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 0 | |