Poziome przewijanie paralaksy od podstaw - brak wtyczki (jQuery)

Czy ktoś wie, czy mogę znaleźć samouczek, w jaki sposób wykonać przewijanie poziomej paralaksy przez rysowanie w formie js (tj. Brak wtyczki)? Lub może dać mi przykład

Spędziłem mnóstwo czasu na Googlingu, ale mogłem tylko znaleźć samouczki za pomocą wtyczek

Powodem, dla którego chcę to zrobić od podstaw, jest to, że chcę doskonale zrozumieć, jak naprawdę działa paralaksa.

Nie mam nic przeciwko używaniubiblioteka jQuery Po prostu nie chcę polegać na wtyczce.

 zero05 wrz 2012, 18:53
@PezCuckow to dziwne, sprawdziłem twoją odpowiedź, a potem opuściłem witrynę. jego odpowiedź nie powinna była zostać sprawdzona, sprawdzę ponownie.
 zero05 wrz 2012, 18:36
@WesleyMurch prawda, ale to, o czym wspomniałeś, to tylko dwie części mojego trzech ataków. rozszyfrowałem też wtyczki, ale wiele razy (jak w tej sytuacji) mogą być jak próba rozwiązania ogromnej kostki rubix (złe komentowanie, kod spaghetti, uniwersalny kod itp.) .) to, czego oczekuję, jest wyjaśnieniem koncepcji, tak że wraz z tym, czego nauczyłem się z sekcjonowania wtyczek i samouczków opartych na wtyczkach, mogę uzyskać bardziej zrozumiałe zrozumienie efektu, a nie połączone zrozumienie nóg rozruchu.
 Wesley Murch05 wrz 2012, 18:01
Wtyczka to nic innego jak fragment kodu, gdy mówisz, że nie chcesz polegać na jednym, nie ma to większego sensu. Jeśli celem jest nauka, dlaczego nie spojrzeć na źródło wtyczek i postępować zgodnie ze wskazówkami?
 Pez Cuckow05 wrz 2012, 18:43
Z ciekawości, dlaczego zmieniłeś swoją zaakceptowaną odpowiedź na Schmiddty? O ile mi wiadomo, właśnie wziął mój kod i opublikował go na jsfiddle ...

questionAnswers(3)

Kod z odpowiedzi @ PezCuckow, ale bez jQuery (tj. Wyłącznie w skrypcie java):http://jsfiddle.net/Gurmeet/s26zxcnf/1/

HTML:

<div onmousemove="update(event)">
    <div id="background">
    </div>
    <div id="middleground">
    </div>
    <div id="foreground">
    </div>
</div>

JS:

var strength1 = 50;
var strength2 = 100;
var strength3 = 200;

var background = document.getElementById('background');
var middleground = document.getElementById('middleground');
var foreground = document.getElementById('foreground');

function update(e){
var pageX = e.clientX - (window.innerWidth / 2);
var pageY = e.clientY - (window.innerHeight / 2);
background.style.backgroundPosition = (strength1 / window.innerWidth * pageX * -1)+"px "+(strength1  / window.innerHeight * pageY * -1)+"px";
middleground.style.backgroundPosition = (strength2 / window.innerWidth * pageX * -1)+"px "+(strength2  / window.innerHeight * pageY * -1)+"px";
foreground.style.backgroundPosition = (strength3 / window.innerWidth * pageX * -1)+"px "+(strength3  / window.innerHeight * pageY * -1)+"px";

};

Oto prostolinijna implementacja przewijania paralaksy:http://jsfiddle.net/4kG6s/

function AnimateMe(){
    $("#background").css("background-position", "-=2");
    $("#middleground").css("background-position", "-=4");
    $("#foreground").css("background-position", "-=8");    
}

setInterval(AnimateMe, 100);

Podczas gdy ta implementacja animuje położenie tła, koncepcja pozostaje taka sama. Pierwszy plan porusza się proporcjonalnie szybciej niż tło, a na sobie znajdują się warstwy ułożone jedna na drugiej. Pojęciowo jest to tak proste, jak tylko się da.

 Shmiddty05 wrz 2012, 18:16
I tutaj jest taka sama konfiguracja z kodem z odpowiedzi @ PezCuckow:jsfiddle.net/4kG6s/1
QuestionSolution

Prosty samouczek

Widzieć:http://www.egstudio.biz/easy-parallax-with-jquery/

Możesz zastosować ten kod do 5/6 elementów (z różnymiscaling) i stworzyć świetny, prosty efekt parralax oparty na myszy użytkownika.

Oto przykład, dziękiShmiddty: http://jsfiddle.net/4kG6s/1

„I tu jest taka sama konfiguracja z kodem z odpowiedzi @ PezCuckow”

Przez skalowanie mam na myśli coś takiego (edytowane z góry)

var strength1 = 5;
var strength2 = 10;
var strength3 = 15;
$("html").mousemove(function(e){
    var pageX = e.pageX - ($(window).width() / 2);
    var pageY = e.pageY - ($(window).height() / 2);
    var newvalueX = ;
    var newvalueY = height * pageY * -1;
    $('item1').css("background-position", (strength1 / $(window).width() * pageX * -1)+"px "+(strength1  / $(window).height() * pageY * -1)+"px");
    $('item2').css("background-position", (strength2 / $(window).width() * pageX * -1)+"px "+(strength2  / $(window).height() * pageY * -1)+"px");
    $('item3').css("background-position", (strength3 / $(window).width() * pageX * -1)+"px "+(strength3  / $(window).height() * pageY * -1)+"px");
});

Bez biblioteki, takiej jak jQuery, efekt paralaksy byłby raczej trudny do zaimplementowania, konieczne byłoby ręczne wdrożenie całej animacji, a nie korzystanie z funkcji dostępnych w bibliotece.

Niemniej jednak przybliżony przewodnik jest podobny do poniższego, który wykorzystuje bardzo słaby efekt paralaksy, gdy tła poruszają się z różnymi prędkościami.

CSS:

#bg1, #bg2, #bg3 {
    background-image:url('stars.gif');
    height: 100%;
    width: 100%;
    position: absolute;
    left: 100%;
}

HTML:

<div id="bg1"></div>
<div id="bg2"></div>
<div id="bg3"></div>

JS:

while(true) {
  document.getElementById('bg1').style.left = (document.getElementById('bg1').style.left) - 4 + 'px';
  document.getElementById('bg2').style.left = (document.getElementById('bg2').style.left) - 10 + 'px';
  document.getElementById('bg3').style.left = (document.getElementById('bg3').style.left) - 20 + 'px';
}
 Pez Cuckow05 wrz 2012, 17:54
 zero05 wrz 2012, 17:51
nie mam nic przeciwko używaniu biblioteki (zaktualizowałem moje pytanie, aby to odzwierciedlało) chcę tylko uzyskać ogólne pojęcie o tym, jak działa bez wtyczki

yourAnswerToTheQuestion