Kako scrollati background image?

Programiranje
#1

Pozdrav,

prije no što pokušate odgovoriti na pitanje iz naslova, molim vas pogledajte ovu sliku : http://i.imgur.com/XkX81mg.jpg?1
Dakle, na dnu slike vidite par stupaca texta i raketu(layer).

Cilj mi je napraviti slijedece:
-kada se ude na stranicu da bude vidljiv taj text, raketa i donji dio background slike, dakle izgleda kao da je raketa na tlu
-i sad, kad bi netko scrollao dolje, cilj mi je da se background slika pomice prema gore, a raketa i sav ovaj text ostaje fiksiran na recimo 200px on dna ekrana, i onda sve to izgleda kao da raketa polijece…

Nadam se da sam uspio docarati sto zelim?

I sad, ovaj dio sa textom i raketom mi je relativno jasan, stavit cu height: 100%; te position: relative; na html i body i onda cu div u kojem ce text i raketa biti smjesteni nastimati od dna kako mi bude odgovaralo. No, nikako mi ne pada na pamet na koji nacin bi mogao iskombinirati da se ova slika u pozadini scrolla. Ima li netko mozda kakvu ideju?

#2

Možda bi nekakav library poput ovog mogao biti od pomoći: https://github.com/Prinzhorn/skrollr

1 Like
#3

Hm, mozda, radio sam vec s njim ali trenutno mi ne pada na pamet ni jedna pametna ideja kako bi ga mogao iskoristit u ovom projektu…

EDIT: palo mi je par ideja na pamet, valjda ce biti nesto. Javim ako uspijem.

#4

Dakle, treba ti 3 layera. jedan sa tekstom, jedan sa raketom kao pozadinskom slikom i jedan sa pozadinskom slikom te zemlje i neba.

Ukratko evo ti jedan fiddle: http://jsfiddle.net/bz5dLkzn/
ove slike bg i bg-small.jpg zamjeni svojima i dimenzije divova prilagodi svojim potrebama. Pa da vidimo jel će ti to pomoći

#5

Hvala ti, tvom sam se odgovoru i nadao! Poceo sam nesto svoje, imam jednu dobru ideju pa cu probat tako, ako ne bude islo iskoristit cu tvoj primjer. Javim se brzo…

#6

Vidi pomaze li ovo ako sam dobro razumeo…

http://jsfiddle.net/a1824q2L

#7

http://traveltodalmatia.com/jaomeni/
Na ovome linku mozete vidjeti trenutno stanje, dakle dodao sam sve elemente koje ce stranica sadrzavati, ofrlje ih pozicionirao cisto da je sve tu za sada… Raketa, tekst, logo… sve je u istom divu, sa position: fixed; atributom. Kasnije ce to biti samo raketa, no sad je to skroz nebitno.

Sad cu pokusati sa ovim https://github.com/Prinzhorn/skrollr podesiti nacin(smjer) na koji se background image scrolla. Makar sumnjam da ce mi to poci za rukom iz razloga sto se na bg img primjenjuje background-size: cover;(ovo dodatno komplicira stvari zato sto je visina slike na jednom ekranu 3800px a na drugom ekranu 4200px, zbog toga sto im se prilagodava po sirini pa samim time i visini) a ovaj library trazi brojcani unos pozicije slike

@creatifcode koristio sam strukturu iz tvog jsfidlea, thanks!
@shimi tvoj primjer je takoder odlican, no kod tebe raketa odleti s ekrana, a cilj je da raketa bude position: fixed, a bg image u pozadini da se pomice tako da se stvori dojam uzlijetanja rakete, hvala i tebi na ulozenom trudu!

Upravo sam obrisao jedno 500 rijeci iz ovog posta da vas ne zbunjujem svojim promisljanjima hahah.

EDIT:
evo ga, uspio sam!! Nije bas glatko i savrseno kako treba bit, ali to cu sutra sredit. Sada napokon mogu u miru zaspat haha :smile: :smile: :smiley: :smiley:

#8

It works like a charm :smiley:
http://traveltodalmatia.com/jaomeni/

#9

Pa bas i ne:

Osim sto mi je skrsio Chrome taj plugin koji korsitis povecava i visinu diva svaki put kad skrolnem kotacic tako da je ne moguce doci do kraja stranice, i nakon sto prodjes onu planetu na slici skrola se samo crni background.

Nesto ti definitivno ne valja sa tim pluginom koji koristis ili sa layoutom. Makar uopce ne vidim zasto bi za tako jednostavnu stvar kao ovu koristio bilo kakav plugin jer definitivno nije potreban niti najmanje.

#10

To sto skrola dalje od planete, u “beskonacno”, je namjerno napravljeno, tako klijent trazi. Zasto ti je skrsilo chrome, e to bome ne znam, cudan je ovaj plugin uvijek sam imao problema s njim…

Imas li mozda neku bolju ideju?

#11

Ante lijepo objasniš klijentu da to što on želi nema smisla i da ima boljih i efektnijih načina da preneseš neku poruku. Ne znam šta koristiš i ne zanima me, ali radiš gadan repaint i scrolljacking. Ovo je na desktopu ovako , a na mobitelu neću ni zamišljat šta je. Da bi ovo dobro implementirao trebaš dobro dobro poznavat kako preglednik radi, a 99 posto pluginova što postoje radi protiv njega, a ne uz njega.
Ideja ti je da ovo pojednostaviš ili nađeš neko bolje riješenje od ovog sad.

1 Like
#12

Na telefonu ti ni ne radi. Uzmi ovo sto ti je creatif dao i odradi bez plugina.

#13

@blaja eh, probat cu nesto ispregovarat… Objasnio sam mu da nema sanse da ovo radi na mobitelu, ali kaze mi da dam sve od sebe da proradi na desktopu…

@shimi a znam da ne radi, mislim da ni nece radit. Napravio sam i prema njegovom naputku, ovako to izgleda : http://traveltodalmatia.com/jebigadragi/

Mislim, princip koji ste predlozili je dobar, ali ne vidim nacin kako napraviti da se slika pocima skrolati od dolje prema gore bez ovoga plugina kojeg trenutno koristim.

#14

OK, za to će ti definitivno trebati malo javascript čarolije, evo probam nešto složiti pa ti okačim kod tu.
Baš bi mi trebalo malo vježbe za mozak.

#15

Hvala ti prijatelju sto se trudis oko ovoga, evo pogledaj kako to trenutno izgleda www.traveltodalmatia.com/logirix
Meni se cini solidno, mana je jedino sto mobilna verzija nije toliko cool koliko i desktop.

#16 
<!doctype html>
<html>
<head>
    <title>Rocket Launching</title>
    <link href="css/main.css" rel="stylesheet" />
    <script type="text/javascript" src="jquery-1.11.2.min.js"></script>
    <script>
        ;(function($){
            var imgWidth = 0;
            var imgHeight = 0;
            
            $(document).ready(function() {
                var img = new Image;
                img.src = $('.bg').css('background-image').replace(/url\(|\)$/ig, "");
                
                imgWidth = img.width;
                imgHeight = img.height;
            });
            
            $(window).bind('wheel mousewheel', function(e) {
                var ev = e.originalEvent.wheelDelta / 120;
                var posNew = 0;
                var pos = $('.bg').css("background-position").split(" ");
                
                if(ev > 0) {
                    posNew = parseInt(pos[1]) + 1;
                    if(posNew > 100) return false;
                    $('.bg').css({'background-position': 'center ' + posNew + '%' });
                } else {
                    posNew = parseInt(pos[1]) - 1;
                    if(posNew < 0 ) return false;
                    $('.bg').css({'background-position': 'center ' + posNew + '%' });
                }
            });
        })(jQuery);
    </script>
</head>
<body>
    <div class="bg"></div>
    <div class="bg-small"></div>
    <div class="content-wrapper">
        <div class="bg-rocket"></div>
        <div class="content">
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

            <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of    letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p>
        </div>
    </div>
</body>
</html>

Evo ti probaj jel ti ovo valja. Samo ne znam kako ćeš na telefonima to izvest morao bi uhvatiti swipe event, ali mislim da je to pretjerivanje. Ko će blesav i ovako to skrolat za bezveze.

#17

Evo reuploadao sam tvoju verziju s izmjenama : http://traveltodalmatia.com/jebigadragi/ ali i dalje je isto. Poslat cu ti .zip na PM pa ako se imas zelje s time zafrkavat, sebi za dušu… ako ne nije vise ni bitno jer sam uspio srediti pomocu onoga plugina… Moram reci da sam odusevljen pluginom, citam dokumentaciju i zafrkavam se s njime citavu vecer, stvarno se mogu napravit zakon stvari s njim. Malo ga jebe podrska za mobitele pogotovo kad se koriste position: fixed elementi ali inace je super.

#18

Bitno da je rijeseno.


Copyright © 2020 WM Forum - About | Contact - Sponsored by: Mydataknox & Profit Monkey