Главная » Файлы » Прочие скрипты » jQuery |
Симпатичный слайдер контента с обалденными эффектами перехода через плагин jmpress на jQuery для uCoz
24.06.14, 16:40:52 | |
Один хороший человек посоветовал мне посмотреть этот слайдер и я в него влюбился с первого взгляда, после чего не мог не оформить его здесь на apo-ucoz Для начала посмотрите ДЕМО Вот моё тестирование в фидле: КЛИК Установка: Для правильной работы слайдера нам нужна библиотека jQuery 1.7.2 или выше После /head на нужных страницах вставляйте: Код <script type="text/javascript" src="/js/jmpress.min.js"></script> <script type="text/javascript" src="/js/jquery.jmslideshow.js"></script> <script> $(document).ready(function() { $('#jms-slideshow').jmslideshow(); }); </script> В самый низ вашего css вставляйте: Код .jms-slideshow { position: relative; width: 80%; max-width: 1400px; min-width: 640px; margin: 20px auto; height: 460px; } .jms-wrapper { width: auto; min-width: 600px; height: 440px; background-color: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .2); -webkit-background-clip: padding; -moz-background-clip: padding; background-clip: padding-box; border: 10px solid #fff; border: 10px solid rgba(255, 255, 255, 0.9); outline: none; -webkit-transition: background-color 1s linear; -moz-transition: background-color 1s linear; -o-transition: background-color 1s linear; -ms-transition: background-color 1s linear; transition: background-color 1s linear; } .color-1 { background-color: #E3D8FF; background-color: rgba(227, 216, 268, 1); } .color-2 { background-color: #EBBBBC; background-color: rgba(235, 187, 188, 1); } .color-3 { background-color: #EED9C0; background-color: rgba(238, 217, 192, 1); } .color-4 { background-color: #DFEBB1; background-color: rgba(223, 235, 177, 1); } .color-5 { background-color: #C1E6E5; background-color: rgba(193, 230, 229, 1); } .step { width: 900px; height: 420px; display: block; -webkit-transition: opacity 1s; -moz-transition: opacity 1s; -ms-transition: opacity 1s; -o-transition: opacity 1s; transition: opacity 1s; } .step:not(.active) { opacity: 0; filter: alpha(opacity=0); /* internet explorer */ -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=0)"; /*IE8*/ } .jms-content { margin: 0px 370px 0px 20px; position: relative; clear: both; } .step h3 { color: #fff; font-size: 52px; font-weight: bold; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1); margin: 0; padding: 60px 0 10px 0; } .step p { color: #fff; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1); font-size: 34px; font-weight: normal; position: relative; margin: 0; } a.jms-link { color: #fff; text-transform: uppercase; background: #969696; /* Old browsers */ background: -moz-linear-gradient(top, #969696 0%, #727272 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #969696), color-stop(100%, #727272)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #969696 0%, #727272 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #969696 0%, #727272 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #969696 0%, #727272 100%); /* IE10+ */ background: linear-gradient(top, #969696 0%, #727272 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#969696', endColorstr='#727272', GradientType=0); /* IE6-9 */ padding: 8px 15px; display: inline-block; font-size: 16px; font-weight: bold; color: #fff; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3); box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5); border: 1px solid #444; border-radius: 4px; opacity: 1; margin-top: 40px; clear: both; -webkit-transition: all 0.4s ease-in-out 1s; -moz-transition: all 0.4s ease-in-out 1s; -ms-transition: all 0.4s ease-in-out 1s; -o-transition: all 0.4s ease-in-out 1s; transition: all 0.4s ease-in-out 1s; } .step:not(.active) a.jms-link { opacity: 0; margin-top: 80px; } .step img { position: absolute; right: 0px; top: 30px; } .jms-dots { width: 100%; position: absolute; text-align: center; left: 0px; bottom: 20px; z-index: 2000; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; } .jms-dots span { display: inline-block; position: relative; width: 12px; height: 12px; border-radius: 50%; background: #777; margin: 3px; cursor: pointer; box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1) inset, 1px 1px 1px rgba(255, 255, 255, 0.3); } .jms-dots span.jms-dots-current:after { content:''; width: 8px; height: 8px; position: absolute; top: 2px; left: 2px; border-radius: 50%; background: #ffffff; /* Old browsers */ background: -moz-linear-gradient(top, #ffffff 0%, #f6f6f6 47%, #ededed 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(47%, #f6f6f6), color-stop(100%, #ededed)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #ffffff 0%, #f6f6f6 47%, #ededed 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #ffffff 0%, #f6f6f6 47%, #ededed 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #ffffff 0%, #f6f6f6 47%, #ededed 100%); /* IE10+ */ background: linear-gradient(top, #ffffff 0%, #f6f6f6 47%, #ededed 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed', GradientType=0); /* IE6-9 */ } .jms-arrows { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; } .jms-arrows span { position: absolute; top: 50%; margin-top: -40px; height: 80px; width: 30px; cursor: pointer; z-index: 2000; box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.1); border-radius: 3px; } .jms-arrows span.jms-arrows-prev { background: #fff url(/images/arrow_left.png) no-repeat 50% 50%; left: -10px; } .jms-arrows span.jms-arrows-next { background: #fff url(/images/arrow_right.png) no-repeat 50% 50%; right: -10px; } /* Not supported style */ .jms-wrapper.not-supported { background-color: #E3D8FF; background-color: rgba(227, 216, 268, 1); } .jms-wrapper.not-supported:after { content:'The slideshow functionality is not supported on your device.'; padding: 0px 0px 30px 0px; text-align: center; display: block; } .jms-wrapper.not-supported .step { display: none; position: relative; opacity: 1; filter: alpha(opacity=99); /* internet explorer */ -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=99)"; /*IE8*/ margin: 20px auto; } .jms-wrapper.not-supported .step:first-of-type { display: block; } .jms-wrapper.not-supported .step:not(.active) a.jms-link { opacity: 1; margin-top: 40px; } В то место, где будет сам слайдер, вставляйте: Код <section id="jms-slideshow" class="jms-slideshow"> <div class="step" data-color="color-1"> <div class="jms-content"> <h3>Заголовок</h3> Любой текст</p> <a class="jms-link" href="#">Заголовок ссылки</a> </div> <img src="Ссылка на картинку" /> </div> <div class="step" data-color="color-2" data-y="500" data-scale="0.4" data-rotate-x="30"> <div class="jms-content"> <h3>Заголовок</h3> Любой текст</p> <a class="jms-link" href="#">Заголовок ссылки</a> </div> <img src="Ссылка на картинку" /> </div> <div class="step" data-color="color-3" data-x="2000" data-z="3000" data-rotate="170"> <div class="jms-content"> <h3>Заголовок</h3> Любой текст</p> <a class="jms-link" href="#">Заголовок ссылки</a> </div> <img src="Ссылка на картинку" /> </div> <div class="step" data-color="color-4" data-x="3000"> <div class="jms-content"> <h3>Заголовок</h3> Любой текст</p> <a class="jms-link" href="#">Заголовок ссылки</a> </div> <img src="Ссылка на картинку" /> </div> <div class="step" data-color="color-5" data-x="4500" data-z="1000" data-rotate-y="45"> <div class="jms-content"> <h3>Заголовок</h3> Любой текст</p> <a class="jms-link" href="#">Заголовок ссылки</a> </div> <img src="Ссылка на картинку" /> </div> </section> Скрипты из прикреплённого архива залейте в папку js, картинки в папку images Материал подготовлен Apocalypse | |
Просмотров: 413 | Загрузок: 0 | |
Всего комментариев: 0 | |
| |