Skapa en fantastisk zoomande webbsida med jQuery (JavaScript)

Vill du skapa en helt unik och iögonfallande effekt för din webbplats? Vad sägs om en animering som zoomar in i en viss del av sidan när du klickar på den?

Det kan låta som mycket arbete men med jQuery och Zoomooz.js, det är en snap! Jag går igenom processen steg för steg, eftersom vi bygger ett fantastiskt zoomat miniatyrgalleri.

Vad vi bygger

Live-demo: Klicka här

Zoomooz.js: Grundläggande introduktion

När du arbetar med nya bibliotek är det alltid bäst att börja med ett dött enkelt exempel, så att du kan få en känsla för hur allt fungerar. Med detta projekt bygger vi en grundläggande sida för att testa zoomfunktionen i skriptet och sedan gå vidare till ett mer praktiskt exempel genom att skapa en helhet på miniatyrgalleriet.

HTML: Inkluderingarna

Detta projekt har massor av saker att inkludera i huvuddelen av din HTML. Det första du vill göra är att gå vidare till Zoomooz.js hemsida och hämta biblioteket. Du ser att det verkligen inte innehåller någon men flera JavaScript-bibliotek. Lyckligtvis, i nedladdningen hittar du instruktioner för att köra ett manus för att kombinera och minimera allt så det är inte så stort och rörigt (jag lämnar det här steget till dig).

Med det i åtanke kommer vårt lilla experiment att kräva att följande kod ska börja:

  Zoomningstest

JavaScript

Nästa upp, kopiera och klistra in skriptet nedan i din HTML. Som du kan se, vad det gör är mål för klassen? Zoom? och tillämpar? zoomTo? metod från biblioteket. Sedan tillämpar vi samma sak på kroppen, vilket gör att användaren kan klicka utanför något element för att zooma ut till normal nivå.

 $ (dokument) .ready (funktion () {$ (".zoom"). klicka (funktion (evt) {evt.stopPropagation (); $ (detta) .zoomTo ();}); $ (funktion (evt) {evt.stopPropagation (); $ ("body"). zoomTo ();}); $ ("body"). zoomTo ();});

Svett inte det för mycket om du inte förstår detta. Tänk bara på att vi måste tillämpa? Zoom? klass till element som vi vill bli zoombara. Samma exakta utdrag kommer att tillämpas i båda dagens projekt så gärna bara kopiera det över.

HTML

Därefter vill vi skapa en grundläggande testplats. För att göra detta måste vi skapa en behållare, en yttre div och en inre div. Behållaren kan tyckas godtycklig men genom att inkludera den och ställa in en bredd / höjd, hjälper det att zoomeffekten fungerar ordentligt på det yttersta elementet.

     <p>Klicka här för att zooma</p>

Observera också att vi har tillämpat? Zoom? klass till både yttre och inre divs. Länken vid denna punkt är egentligen bara ett dummyelement som hjälper till att styra användaren. Skriptet fungerar helt bra utan det.

CSS

Därefter tillämpar vi storlekar och positionering på varje element. Återigen gör en definierad behållarstorlek zoomfunktionen ordentligt, liksom läget: absolut? uttalande om "inre" div. Skriptet kan vara lite konstigt så se till att du får dessa artiklar rätt.

 #container {width: 800px; höjd: 500px; marginal: 0 auto; } #outer {width: 400px; höjd: 200px; bakgrund: #aaa; marginal: 50px auto; vaddering: 70px; } #inner {width: 400px; höjd: 200px; bakgrund: #eee; marginal: 0 auto; position: absolut; }

Text CSS

Slutligen, här kasta vi bara i en del grundläggande text styling för stycket tillsammans med ett svävarläge. Återigen är du fri att gräva länken helt.

 #inner p {text-align: center; typsnitt: 25px / 200px Helvetica, sans-serif; } #inner p a {color: # 000; text-dekoration: ingen; } #inner p a: svävar {text-decoration: underline; }

demo

Med det är vår enkla demo klar. Starta demoversidan för att se den i åtgärd. Observera att klickar på varje div ger dig en annan zoomnivå och klickar ut i kroppen zoomar dig hela vägen ut.

Zoomooz.js: Thumbnail Gallery

Med samma teknik kan vi bygga ett fantastiskt miniatyrgalleri med en zoom inverkan. Det är viktigt att notera att det här pluginet förmodligen fungerar bäst för element gjorda med webbläsaren. När vi använder den för bilder, som vi kommer nedan, är den olyckliga verkligheten att du måste ladda allt i sin inzoade storlek.

Så trots att vi har en sida full av små miniatyrer laddar vi faktiskt in på en sida full av stora bilder, vilket kan ta flera sekunder beroende på användarens anslutningshastighet.

Trots denna begränsning är det fortfarande roligt att driva saker till gränsen och se vad som är möjligt.

html

HTML för detta projekt kommer faktiskt att vara super enkelt. Jag börjar med en div som innehåller lite beskrivande text, i princip bara en snabbrubrik och punktlabel för att förklara vad som händer. Därefter skapade jag en stor orörd lista med bilderna. Det är ganska mycket det!

Observera att jag har tillämpat? Zoom? klass till både "galleriet" div som helhet och till varje bild inom div. Detta ger oss två nivåer av zoomning att spela med. Biblioteket är intelligent nog att hantera relativa zoomnivåer baserat på föräldra- / barnrelationer.

Se också till att du tar tag i huvudkoden och JavaScript från föregående exempel. Jag använder samma exakta inställning, bara min kropp HTML och CSS kommer att ändras.

   <h1>Zooma galleri</h1> <p>Klicka på en bild nedan för att zooma in i den och klicka sedan ute för att zooma ut. Pretty snygg eh?</p>   <ul> <li><img src="//lesptitesaffairesdemayl.be/img/images_1/create-an-awesome-zooming-web-page-with-jquery_3.jpg"> <h3>Galleri CSS</h3> <p>Nu är det dags att avsluta vårt projekt genom att utforma galleriet. Först vill vi stila bara "galleriet"? div, som fungerar som behållaren för våra miniatyrbilder. Jag gav den en bredd på 720px, en höjd av 370px och en grå bakgrundsfärg.Jag inkluderade också en liten polstring så att miniatyrerna inte stöter upp mot kanterna och en marginal på? 0 auto? att centrera diven horisontellt (detta fungerar bara om du anger en bredd).</p>     <textarea wrap="soft" readonly=""> / * Galleriestilar * / #gallery {width: 720px; höjd: 370px; marginal: 0 auto; vaddering: 10px; bakgrund: # 383131; }

När du är färdig med att utforma galleribehållaren är det dags att göra vår stora lista med bilder överensstämmer med ett rutnät. För att göra detta, deklarera? Ingen? som liststypstyp och flyter de? li 'elementen kvar. Observera också positioneringskontexten och svängningseffekten. För den senare av dessa släppte jag marginalerna på svävar så att gränsen inte skulle påverka layouten. Så att börja, har varje miniatyrbild en marginal på 10px, sedan på svängaren har en miniatyrbild en marginal på 7px och en 3px-gräns (7 + 3 = 10).

 / * Lista Styles * / ul {list-style-type: none; position: absolut; bredd: 720px; } #gallery ul li {float: left; marginal: 10px; bakgrund: vit; höjd: 100px; bredd: 100px; } #gallery ul li: hover {border: 3px solid white; marginal: 7px; } #gallery ul li img {höjd: 100px; bredd: 100px; }

Med det är vi alla färdiga! Klicka på bilden nedan för att starta demoen.

Slutsats

Idag använder vi HTML, CSS och JavaScript synergistiskt för att skapa ett galet webbgalleri som zoomar in i en miniatyrbild när du klickar. Som vi visade i testdemoen kan samma effekt fungera på något element du vill ha!

Vi har knappt repat ytan på vad Zoomooz.js kan göra. Stanna vid projektsidan för att se hur man gör ännu mer med denna fantastiska plugin.