Styleguide 0.1.0

24 - Scroll snap preview

Scroll snap for article preview

24.1 - Scroll snap - Normal

Scroll snap for article preview

<div class="row">
 <div class="scrollsnap-wrapper">
   <h1 class="headline scrollsnap-title">Siste nytt</h1>
   <div class="scroll-container">
     <div class="snap-scroller">
       <article class="inside preview" itemscope itemtype="http://schema.org/NewsArticle" role="article" data-id="#">
         <a href="#" itemprop="url">
           <figure>
             <img itemprop="image" title="" alt="" src="/assets/test/berger.jpg">
           </figure>
           <h1 itemprop="headline" class="headline">Nå tror vi de endelig har klart det!</h1>
         </a>
       </article>
       <article class="inside preview" itemscope itemtype="http://schema.org/NewsArticle" role="article" data-id="#">
         <a href="#" itemprop="url">
           <figure>
             <img itemprop="image" title="" alt="" src="/assets/test/blipps.jpg">
           </figure>
           <h1 itemprop="headline" class="headline">Krever momsfritaket fjernet</h1>
         </a>
       </article>
       <article class="inside preview" itemscope itemtype="http://schema.org/NewsArticle" role="article" data-id="#">
         <a href="#" itemprop="url">
           <figure>
             <img itemprop="image" title="" alt="" src="/assets/test/trinni-sus.jpg">
           </figure>
           <h1 itemprop="headline" class="headline">I fjor gikk 14.000 elever glipp av dette stipendet</h1>
         </a>
       </article>
       <article class="inside preview" itemscope itemtype="http://schema.org/NewsArticle" role="article" data-id="#">
         <a href="#" itemprop="url">
           <figure>
             <img itemprop="image" title="" alt="" src="/assets/test/berger.jpg">
           </figure>
           <h1 itemprop="headline" class="headline">Anette fikk den første Tesla Model 3 i Norge - lenge før alle andre</h1>
         </a>
       </article>
       <article class="inside preview" itemscope itemtype="http://schema.org/NewsArticle" role="article" data-id="#">
         <a href="#" itemprop="url">
           <figure>
             <img itemprop="image" title="" alt="" src="/assets/test/blipps.jpg">
           </figure>
           <h1 itemprop="headline" class="headline">Apple Watch med eSIM kan være på vei</h1>
         </a>
       </article>
       <article class="inside preview" itemscope itemtype="http://schema.org/NewsArticle" role="article" data-id="#">
         <a href="#" itemprop="url">
           <figure>
             <img itemprop="image" title="" alt="" src="/assets/test/trinni-sus.jpg">
           </figure>
           <h1 itemprop="headline" class="headline">Den gunstige sparekontoen kan koste deg 30.000 kroner i gebyr</h1>
         </a>
       </article>
     </div>
   </div>
 </div>
</div>

24.2 - Scroll snap - video gallery

Scroll snap for videos

<div class="row">
 <div class="scrollsnap-wrapper">
   <h1 class="headline scrollsnap-title"><span>Siste videoer</span></h1>
   <div class="scroll-container"> 
     <div class="snap-scroller video">
       <article class="inside preview" itemscope itemtype="http://schema.org/NewsArticle" role="article" data-id="#">
         <a href="#" itemprop="url">
           <figure>
             <img itemprop="image" title="" alt="" src="https://cdn.jwplayer.com/thumbs/aCbEyYc4-1920.jpg">
           </figure>
           <h1 itemprop="headline" class="headline">Tatt på senga av "Farmen"-kjærestens gaveønske </h1>
         </a>
       </article>
       <article class="inside preview" itemscope itemtype="http://schema.org/NewsArticle" role="article" data-id="#">
         <a href="#" itemprop="url">
           <figure>
             <img itemprop="image" title="" alt="" src="https://cdn.jwplayer.com/thumbs/5UfqmF0d-1920.jpg">
           </figure>
           <h1 itemprop="headline" class="headline">Hertugparets "levende" voksfigurer vekker oppsikt</h1>
         </a>
       </article>
       <article class="inside preview" itemscope itemtype="http://schema.org/NewsArticle" role="article" data-id="#">
         <a href="#" itemprop="url">
           <figure>
             <img itemprop="image" title="" alt="" src="https://cdn.jwplayer.com/thumbs/fR5Z7odf-1920.jpg">
           </figure>
           <h1 itemprop="headline" class="headline">Blir satt ut av drøy snap fra Nordthug</h1>
         </a>
       </article>
       <article class="inside preview" itemscope itemtype="http://schema.org/NewsArticle" role="article" data-id="#">
         <a href="#" itemprop="url">
           <figure>
             <img itemprop="image" title="" alt="" src="https://cdn.jwplayer.com/thumbs/aCbEyYc4-1920.jpg">
           </figure>
           <h1 itemprop="headline" class="headline">Tatt på senga av "Farmen"-kjærestens gaveønske </h1>
         </a>
       </article>
       <article class="inside preview" itemscope itemtype="http://schema.org/NewsArticle" role="article" data-id="#">
         <a href="#" itemprop="url">
           <figure>
             <img itemprop="image" title="" alt="" src="https://cdn.jwplayer.com/thumbs/5UfqmF0d-1920.jpg">
           </figure>
           <h1 itemprop="headline" class="headline">Hertugparets "levende" voksfigurer vekker oppsikt</h1>
         </a>
       </article>
       <article class="inside preview" itemscope itemtype="http://schema.org/NewsArticle" role="article" data-id="#">
         <a href="#" itemprop="url">
           <figure>
             <img itemprop="image" title="" alt="" src="https://cdn.jwplayer.com/thumbs/fR5Z7odf-1920.jpg">
           </figure>
           <h1 itemprop="headline" class="headline">Blir satt ut av drøy snap fra Nordthug</h1>
         </a>
       </article>
       
     </div>
   </div>
 </div>
</div>