Достижение эффекта горизонтального движения и увеличения UI - возможен плагин jQuery (?)

-3

Мое вдохновение http://www.diesel.com/bags-female. Может ли кто-нибудь объяснить, как я могу добиться этого эффекта?Достижение эффекта горизонтального движения и увеличения UI - возможен плагин jQuery (?)

Я начал с этим кодом:

$(document).ready(function(){ 
    $('#background-thing').mousemove(function(e){ 
     var mousePos = (e.pageX/$(window).width())*100; 
     $('#background-thing').css('backgroundPosition', mousePos+'% 0'); 
     //alert(mousePos); 
    }); 
    });

Но прокручивается только фоновое изображение. Я хочу иметь несколько ссылок поверх фонового изображения, которые являются якорями, и щелчок по этим изображениям сделает эффект масштабирования для этой конкретной координаты.

Должен ли я взглянуть на плагин jQuery? Если да, то каковы ваши рекомендации?

источник

2013-11-20 subho das

Вы можете проверить это - http://lodep.com/best-free-parallax-scrolling-jquery/ и http://www.jqueryscript.net/tags.php ?/parallax/если вы найдете их полезными. –

Я не думаю, что вам нужен или нужен какой-либо JQuery-плагин для того, что вы делаете.

Эта страница, предоставленная для справки, использует css 3d-преобразования и стандартный Jquery. Вот ссылка для этого на w3schools: http://www.w3schools.com/css/css3_3dtransforms.asp

Конкретно что-то вроде:

//clearly broken code used just for example 
$(document).ready(function(){ 
    $('#yourpagecontainer').on("click","a",function(){ 
     $(this).css("transform", "scale3d("+x+","+y+","+z+")"); 
    } 
}

код, который вы ввели, не делает это ясно, что именно вам нужно далеко, но, возможно, вы бы принести пользу от взгляда на этот пример: http://sarasoueidan.com/blog/windows8-animations/

Это не идентично, но это зависит от того, что вы хотели бы сделать.

источник

2013-12-01 20:37:55

Я использовал skrollr в прошлом для быстрых реализаций, и он мне очень понравился.

Вот некоторые ссылки:

https://github.com/Prinzhorn/skrollr

http://prinzhorn.github.io/skrollr/

Надежда, что помогает, удачи!

источник

2013-12-02 20:32:01 jmdb

Я не думаю, что ваш пример строго соответствует определению «параллакс» like this site. я уверен, что вы могли бы достичь что-то похожее на ваш пример с:

Изменение размера CSS3 фона и положение на клик (как объясняется в this question и here).
Применение частично прозрачного .png с полностью прозрачным «окном» в центре по всему окну при нажатии для достижения такого же размытого/фокусного вида. Вы можете применять различные фильтры на частично прозрачных областях, чтобы получить что-то более художественное. Inkscape делает это довольно хорошо, и это бесплатно;)

Это, однако, не будет кроссовым решением. Все говорят «Internet Explorer» (8 и ниже). Для 9 и выше убедитесь, что у вас есть <!DOCTYPE html />, иначе ваш CSS3 станет CSSFAIL.

Fun проекта, наслаждайтесь :)

источник

2013-12-05 03:50:26

Достижение эффекта горизонтального движения и увеличения UI - возможен плагин jQuery (?)

ответ

Смежные вопросы