Een scrolling screenshot-preview-effect creëren in Elementor - DeLaatbusiness
leads chatbot

Een scrolling screenshot-preview-effect creëren in Elementor

2 min


118
6 gratis internet marketing ebooks, klik hier voor download

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]


What's Your Reaction?

hate hate
0
hate
confused confused
0
confused
fail fail
0
fail
fun fun
0
fun
geeky geeky
0
geeky
love love
0
love
lol lol
0
lol
omg omg
0
omg
win win
0
win
Erwin@delaatbusiness.com
Dag, Hulp nodig met internet marketing of websites maken? neem dan contact op

0 Comments

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *

Choose A Format
Personality quiz
Series of questions that intends to reveal something about the personality
Trivia quiz
Series of questions with right and wrong answers that intends to check knowledge
Poll
Voting to make decisions or determine opinions
Story
Formatted Text with Embeds and Visuals
List
The Classic Internet Listicles
Countdown
The Classic Internet Countdowns
Open List
Submit your own item and vote up for the best submission
Ranked List
Upvote or downvote to decide the best list item
Meme
Upload your own images to make custom memes
Video
Youtube, Vimeo or Vine Embeds
Audio
Soundcloud or Mixcloud Embeds
Image
Photo or GIF
Gif
GIF format