Hoe geef je je logo het Slip Scroll -effect

In de tutorial van vandaag gaan we JavaScript gebruiken om een ​​eenvoudig, flexibel parallaxeffect te creëren waarbij een logo schijnbaar van kleur verandert met de achtergrond waarop het is geplaatst wanneer de gebruiker scrolt.

Het Slip Scroll-effect in actie

We zullen een "default" -element maken dat trouw blijft aan de plaatsing (positie: vast) en een aantal "verplaatsbare" elementen waarvan de positie afhankelijk is van dat "standaard" -element. We zullen JavaScript gebruiken om dit te laten gebeuren elke keer dat de gebruiker scrolt.

Notitie: om alle bases te dekken heb ik de uitleg in video en geschreven vorm verstrekt. 

Bekijk de video

Abonneer je op Tuts + Web Design op YouTube

Lees de handleiding

Basis markup

We beginnen met het maken van een aantal elementen. Laten we een van hun achtergronden donker en één licht maken, zodat we een contrasterende afbeelding in zich kunnen hebben. Laten we ook doorgaan en van onze eerste afbeelding de "standaard" afbeelding maken door er een klasse van te geven standaard, terwijl de andere afbeeldingen de klasse krijgen beweegbaar.

Basisstijlen

Laten we er nu voor zorgen dat onze afbeeldingen niet door het instellen naar buiten scrollen overloop verborgen. We gaan ook verder en zeggen dat deze containers een relatieve positie hebben, zodat de absoluut gepositioneerde elementen op deze containers uitkomen in plaats van direct op het vaste element wanneer we onze JavaScript schrijven. 

Omwille van de scrollabiliteit, laten we deze containers een min-height van ongeveer 400px. En om onze logo's van de randen weg te houden, laten we ze wat geven vulling van 1em.

.container overloop: verborgen; positie: relatief; minimale hoogte: 400 px; opvulling: 1em;  

Elke container heeft wat contrastrijke kleuren nodig, dus:

.donker achtergrond: # 333;  .light background: #fff;  

En ten slotte, zoals beloofd, laten we onze standaard en verplaatsbare CSS instellen, zodat er één vastzit aan de pagina terwijl de gebruiker scrolt, en de andere mee beweegt zonder tegen andere elementen aan te botsen:

.standaard positie: vast;  .beweeglijk positie: absoluut; 

Dat moet zorgen voor de opmaak en styling. Als u de pagina bekijkt, ziet u dat het standaardlogo naar beneden schuift en zich verschuilt achter de andere containers, terwijl alle verplaatsbare logo's als normale elementen in de linkerbovenhoek van hun respectieve containers moeten worden weergegeven.

Introductie van JavaScript

Nu voor het leuke gedeelte, waardoor het werkt met JavaScript.

Eerst laden we jQuery en ons aangepaste script onderaan onze index.html:

Maak en open een bestand met de naam js / slipScroll.js.

Binnen dat bestand is het eerste wat we doen een functie genaamd setLogo en gooi deze functie naar een jQuery-schuifgebeurtenis zodat elke keer dat de gebruiker een pixel schuift, deze gebeurtenis wordt geactiveerd. We willen er ook voor zorgen dat we deze gebeurtenis activeren wanneer de gebruiker voor het eerst op de pagina aankomt (voordat deze scrolt):

var setLogo = function () ; $ (document) .scroll (function () setLogo ();); setLogo (); 

Dingen laten werken

Nu voor de magie. Laten we zeggen dat elke afzonderlijke instantie van .beweegbaar op de pagina moet de CSS veranderen top positie tot hoe ver de standaardafbeelding van de bovenkant van de pagina komt, minus tot zover .beweegbaar de container van element komt van de bovenkant van de pagina.

var setLogo = function () $ ('. moveable') each (function () $ (this) .css ('top', $ ('. default'). offset (). top - $ (this) .closest ('. container'). offset (). top);); ; 

Ververs je pagina en voila! U hebt zojuist een pseudo-parallax-schuifeffect gecreëerd met slechts een paar regels code.

Conclusie

Ik moedig je aan om te sleutelen aan deze oplossing. Probeer eens te spelen met de JavaScript-functie zelf om te zien wat voor rare verschuivingen je krijgt als je een paar pixels toevoegt of verwijdert. Gebruik verschillende elementen (navigatie iemand?) In plaats van alleen afbeeldingen voor uw schuifbare inhoud.

Ik hoop dat je veel hebt geleerd en voel je vrij om reacties hieronder te laten vallen als je vragen hebt.