Search the Community
Showing results for tags 'parallax'.
Found 10 results
-
Реализация скроллинга с параллакс эффектом вызвала у меня ряд вопросов. Как оказалось – он адекватно работает только в firefox. Смотрел множество сайтов, везде есть рывки при прокрутке. В ИЕ хуже всего – кроме рывков – дерганье. Отсюда вопрос: возможна ли кроссбраузерная реализация (плавная горизонтальная прокрутка без рывков и дерганий)? Пример задачи: http://addevelop.ru/...t/View-new.html Буду рад советам и примерам реализации плавности. Описывайте свой опыт реализации подобных задач.
-
есть такой параллакс, никак не могу добиться того, чтобы он был по всей области экрана вне зависимости от того какой масштаб страницы или это 35% или 150% нужно чтобы он всегда оставался одного размера P.S с простым фоном сделать это легко, надеюсь и здесь решение под поверхностью. <!DOCTYPE html> <html lang="en" class="no-js demo5"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title></title> <link rel="shortcut icon" href="../file/favicon.gif"> <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script> <link rel="stylesheet" type="text/css" href="css/default.css" /> <script type="text/javascript" src="js/jquery.interactive_bg.js"></script> <!-- Edit Below --> <link rel="stylesheet" type="text/css" href="css/style.css" /> <body> <div class="container bg" data-ibg-bg="bg.jpg"> <div class="container bg" </div> <script type="text/javascript"> $(".bg").interactive_bg(); $(".bg").interactive_bg({ strength: 38, scale: 1.05, animationSpeed: "150ms", contain: false, wrapContent: falce, }); </script> </div><!-- Container --> </body> </html>
-
Приветствую! Подскажите, пожалуйста при посадке на хостинг в хэдере не отображается картинка параллакса, хотя на локалке все работает. <header class="main-head bg-dark parallax-window" data-parallax="scroll" data-image-src="<?php echo get_template_directory_uri(); ?>/img/bg.jpg" data-z-index="1"> пробовал также stylesheet подставлять в get_. Может, нужно для параллакса что-то еще дописать? (в консоли 404 на картанку пишет)
-
Всем привет! Срочно ищем в офис в Москве на полную ставку отвязного frontend-разработчика с навыками джедая. Полное описание вакансии здесь: https://moikrug.ru/vacancies/1000021706 Пишите на почту из текста вакансии или мне в личку.
-
Добрый день. С простом параллакс эффектом разобрался на этом примере. Перемещение объектов при скроле тоже более-менее разобрал (на статичном фоне). Хочу сделать что бы при прокручивании в слое с параллаксом изображения (именно в этом слое) тоже перемещались. Подскажите пожалуйста где можно посмотреть материал, желательно для самых начинающих. Нашёл пару примеров, но для меня пока слишком мудрёно. Хочу что бы на выходе получилось что то вроде этого.
-
Здравствуйте! На одной из страниц, которую я сейчас пытаюсь сверстать есть Parallax-эффекет. Я добился того, что он работает, но вылезла проблема: откуда-то появляется горизонтальный скролл, хотя инспектор показывает размеры элементов верные. Разметка страницы: <div class="card"> <div class="image"> <!-- Image --> <img src="..."> </div> <div class="info"> <!-- Information --> </div></div>Стили: .card { height: 100vh; perspective: 1px; overflow-y: auto; overflow-x: hidden; perspective-origin: top center; background: white;}.image { transform: translateZ(-1px) scale(3); height: auto; width: 100vw;}.info { transform: translateZ(0); background: background: rgb(154, 199, 170); width: 100vw box-sizing: border-box;}C такой разметкой и стилями эффект работает, но появляется горизонтальный скролл. Если при этом потянуть влево и вверх, то получится вот такой эффект: Подскажите, пожалуйста, почему такое может происходить (что добавляется горизонатльный скролл и едет блок .info)? Проблема решена Я наложил стили на вложенную картинку в блоке .img, после чего все заработало как надо: .image img{ transform: translateZ(-1px) scale(3); width: 100vw;}.image { height: auto; overflow: hidden;}
-
Доброго времени суток! Есть тестовая страница http://poligonteam.ru/ Задача: поместить фоновое слайд шоу Supesized v3.2.7 в первый параллакс слайд (Stellar.js). Собственно на данный момент часть слайд шоу помещено в первый слайд (текст и кнопки навигации), но смена изображений происходит в body (Slide1 и Slide4 имеют прозрачный фон). В jQuery (да и вообще в JavaScript) понимаю плохо, но стараюсь разобраться. Просматривая код (Supersized), натолкнулся на такую запись (function($){ /* Place Supersized Elements —————————-*/ $(document).ready(function() { $('body').append('<div id="supersized-loader"></div><ul id="supersized"></ul>'); }); $.supersized = function(options){ Весь код (не сжатый) Что нужно вписать вместо "body" и/или как правильно разместить элементы, чтобы выполнить задачу? UPD Присвоил элементу id="slide1" дополнительный class="supersized_place" заменил "body" в коде плагина. Получилось, так - (function($){ /* Place Supersized Elements —————————-*/ $(document).ready(function() { $('div.supersized_place').append('<div id="supersized-loader"></div><ul id="supersized"></ul>'); }); $.supersized = function(options){ Ну и соответственно изменил position для элементов слайд шоу с fixed на relative и absolute. Вроде все получилось, как и хотел) P.S. если заметите ошибку или не точность, ПОЖАЛУЙСТА сообщите мне об этом. На ошибках учатся...
-
нашёл подходящую тему. как удалить эту тему?
-
Предположим, есть 2 блока с фонами, которые "не скроллятся" и которые расположены на разных концах страницы: http://jsbin.com/ecahoj/6/edit Первый блок ведет себя просто великолепно, но со вторым такого не прокатит. Как решить данную проблему? Для наглядности, можно убрать в css no-repeat для фонов, тогда получится приблизительно нужный результат, но так дела не делаются
-
Здравствуйте! Сайт http://vladimirovvova.ru Видео работы Владимирова Владимира Владимировича выделенные по категориям. Прошу оценить сам сайт, уместен ли parallax-эффект и стоит ли вставлять вместо видео, миниатюры, а после загружать само видео, как это сделано на главной страничке (главном блоке)?
