Het ontwerpen van uw website wordt beschouwd als het cruciale onderdeel van webontwikkeling. Bij webdesign moet je voorzichtig en verstandig zijn, want zelfs het kleinste effect kan de algehele gebruikerservaring veranderen.
Er kunnen veel plug-ins of add-ons zijn waaruit u kunt kiezen en die u kunt gebruiken om prachtige effecten te bereiken, maar sommige zijn premium. Bent u ooit een afbeelding tegengekomen met een bijzonder lange schermafbeelding, die automatisch scrolt wanneer u de muisaanwijzer plaatst? Ze worden preview-scrollen genoemd. Prachtig, is het niet?
Overweegt u om ze op uw site te implementeren? Stop dan nu met uw gedachten en volg deze eenvoudige en gemakkelijke tutorial.
Laten we beginnen
Eerst en vooral moet u de afbeelding instellen als achtergrond van de ” <div> ” of container. (Opmerking: als u dit niet doet, wordt het scrollende voorbeeld niet van kracht).
.templates-thumb is een klasse die ik in de container heb geplaatst waar ik de achtergrondafbeelding instel voor targetingdoeleinden.
Ik heb een specifieke hoogte ingesteld op de bovenliggende container van .templates-thumb, wat de .featured-blog-afbeelding is. zoals je kunt zien heb ik pixel gebruikt om een container een vaste hoogte te geven.
Voeg op de .templates-thumb container deze css toe om deze zichtbaar te maken.
Om het scroleffect te implementeren, voegt u dit toe aan .templates-thumb: hover.
Opmerking: u kunt elke gewenste klasse (met elke naam) op de container plaatsen.
Dat is het! Het lijkt erop dat het nu jouw beurt is. Begin met het coderen van het scrollvoorbeeld van uw site …
HTML
[html]<div class = “feature-blog-image”>
<div class = “templates-thumb” style = “background-image: url (https://wpbuilt.co/wp-content/uploads/2018/08 /charity-foundation-500 × 1815.jpg); “> </div>
</div>
[/ html]
CSS
[css].feature-blog-afbeelding {
hoogte: 320px! belangrijk;
}
.templates-thumb {
hoogte: 100%;
breedte: 100%;
achtergrondpositie: midden bovenaan;
achtergrondgrootte: omslag;
grensradius: 10px;
}
.templates-thumb: hover {
-moz-transition: background-position 4.5s lineair 0s;
overgang: achtergrondpositie 1.5s lineair 0s;
achtergrondpositie: midden onder! belangrijk;
}
[/ css]
0 Comments