Report
-
Similar Content
-
By TrueGavr
есть такой параллакс, никак не могу добиться того, чтобы он был по всей области экрана вне зависимости от того какой масштаб страницы или это 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>
-
By woodoo
Приветствую! Подскажите, пожалуйста при посадке на хостинг в хэдере не отображается картинка параллакса, хотя на локалке все работает.
<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 на картанку пишет)
-
By AlexxD
Всем привет!
Срочно ищем в офис в Москве на полную ставку отвязного frontend-разработчика с навыками джедая. Полное описание вакансии здесь: https://moikrug.ru/vacancies/1000021706
Пишите на почту из текста вакансии или мне в личку.
-
By cartrege
Здравствуйте!
На одной из страниц, которую я сейчас пытаюсь сверстать есть 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;} -
By PR0XY2027
Доброго времени суток!
Есть тестовая страница 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. если заметите ошибку или не точность, ПОЖАЛУЙСТА сообщите мне об этом. На ошибках учатся...
-