WebFlow Tips
Webflow Video
Webflow Video
Youtube/Vimeo video
- Een video element zal zich aanpassen aan de dimensie van zijn parent.
Background Video
- Je kan beweging toevoegen (zonder audio) aan een achtergrond
Lightbox video
- text
Lightbox video
- Een lightbox heeft telkens een thumbnail
- klik -> overlayer met je gekozen media
WebFlow Tips
Horizontal Slider
SplideJS
- Externe bibliotheek voor het realiseren van carousel of slides
- documentatie
CSS en JS toevoegen
- Ga naar je pagina-instelling
CSS toevoegen
- Scroll naar beneden en voeg volgende CSS toe
- t
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.3/dist/css/themes/splide-default.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.3/dist/css/splide.min.css">JS toevoegen
- Scroll naar beneden en voeg volgende JS toe
- t
<script src="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.3/dist/js/splide.min.js"></script>
<script>
function slider1() {
let splides = $('.slider1');
for ( let i = 0, splideLength = splides.length; i < splideLength; i++ ) {
new Splide( splides[ i ], {
// Desktop on down
perPage: 3,
perMove: 1,
focus: 0, // 0 = left and 'center' = center
type: 'slide', // 'loop' or 'slide'
gap: '2em', // space between slides
arrows: 'slider', // 'slider' or false
pagination: 'slider', // 'slider' or false
speed : 600, // transition speed in miliseconds
dragAngleThreshold: 30, // default is 30
autoWidth: false, // for cards with differing widths
rewind : true, // go back to beginning when reach end
rewindSpeed : 400,
waitForTransition : false,
updateOnMove : true,
trimSpace: true, // true removes empty space from end of list
} ).mount();
}
}
slider1();
</script>HTML structuur
- Bouw de juiste HTML structuur op
<section>
<container class="overflow">
<div class="splide slider1">
<div class="splide__track">
<ul class="splide__list">
<li class="splide__slide">Slide 01</li>
<li class="splide__slide">Slide 02</li>
<li class="splide__slide">Slide 03</li>
</ul>
</div>
</div>
</container>
</section>
list
list-item
container
div
div
- let op de dubbele underscore: splide__track, splide__list, splide__slide
HTML structuur
list
list-item
container
div
div
Div met de de klasse splide krijgt een tweede klasse: slider1
<script src="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.3/dist/js/splide.min.js"></script>
<script>
function slider1() {
let splides = $('.slider1');
......Splide__list
- Maak van je lijst een flex-parent
- Selecteer een flex-child en stel dat hij niet mag krimpen
splide__slide
- Selecteer een flex-child (splide__slide) en stel dat hij niet mag krimpen
- Je kan binnen je listitem verschillende zaken toevoegen (media, teks, ...)
- Geef je listitem een width. Wil je drie elementen naast elkaar type je bij width: 100/3%
bij 4 elementen: 100/4%
Overflow container
- Geef je container de klasse overflow
- en vink overflow hidden aan door op het oogje te klikken
container
WebFlow Tips
Horizontal Scrolling
WebFlow Tips
Timeline
Header
- Maak volgende header na
Opbouw
timeline_item_left
timeline_item_center
met een cirkel
timeline_item_right
timeline_item
Opbouw
- Alle timeline_items behoren tot timelime_wrapper
- Positioneer timeline_wrapper relatief
- Maak timeline_progress met een breedte van 3px, 100% hoogte en position: absolute en een achtergrondkleur
- Bekijk hier het resultaat
Animatie (optioneel)
- Wil je je tijdlijn animeren, bekijk dan deze video
- Bekijk hier het resultaat van de geanimeerde versie
Webflow Tips
By timdpaep
