Styleguide 0.28.5

37 - Scroll snap preview

Scroll snap for article preview

37.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/slider-01.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/slider-02.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/slider-03.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/slider-04.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/slider-05.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/slider-06.jpg">
           </figure>
           <h1 itemprop="headline" class="headline">Den gunstige sparekontoen kan koste deg 30.000 kroner i gebyr</h1>
         </a>
       </article>
     </div>
     <svg xmlns="http://www.w3.org/2000/svg" width="101" height="56"><g fill="none" fill-rule="evenodd"><rect width="101" height="56" fill="#000" fill-rule="nonzero" opacity=".803" rx="11.761"/><path fill="#FFF" fill-rule="nonzero" d="M62.2 19.579v-.005a.704.704 0 0 0-.353-.621l-4.279-4.245a.717.717 0 0 0-1.01 0 .703.703 0 0 0 0 1l3.17 3.145H41.272l3.169-3.144a.703.703 0 0 0 0-1.001.718.718 0 0 0-1.01 0l-4.279 4.245a.704.704 0 0 0-.352.619v.014a.704.704 0 0 0 .352.619l4.279 4.245a.72.72 0 0 0 1.01 0 .704.704 0 0 0 0-1.002l-3.169-3.144h18.454l-3.168 3.144a.704.704 0 0 0 0 1.002.719.719 0 0 0 1.01 0l4.278-4.245a.702.702 0 0 0 .352-.62v-.006"/><path fill="#FFF" d="M37.512 41.41c0 .754-.274 1.342-.82 1.764-.547.422-1.29.633-2.227.633-1.016 0-1.797-.131-2.344-.393v-.96a6.17 6.17 0 0 0 1.149.35c.414.087.824.13 1.23.13.664 0 1.164-.126 1.5-.378.336-.252.504-.603.504-1.052 0-.297-.06-.54-.179-.73-.119-.189-.318-.364-.597-.524-.28-.16-.705-.342-1.275-.545-.797-.285-1.366-.623-1.708-1.014-.342-.39-.513-.9-.513-1.529 0-.66.248-1.185.745-1.576.496-.39 1.152-.586 1.968-.586.852 0 1.635.156 2.35.469l-.31.867c-.708-.297-1.395-.445-2.063-.445-.527 0-.94.113-1.236.34-.297.226-.446.54-.446.943 0 .297.055.54.164.73.11.189.294.363.554.52.26.159.657.334 1.192.525.899.32 1.517.664 1.855 1.031.338.368.507.844.507 1.43zm9.828 2.28h-.984l-1.729-5.737a18.515 18.515 0 0 1-.275-.96c-.102-.388-.154-.62-.158-.698-.086.516-.223 1.08-.41 1.693l-1.676 5.701h-.985l-2.279-8.566H39.9l1.353 5.291c.188.742.325 1.414.41 2.016.106-.715.262-1.414.47-2.098l1.534-5.209h1.055l1.611 5.256c.188.605.346 1.289.475 2.05.074-.554.215-1.23.422-2.027l1.348-5.279h1.054l-2.29 8.566zm4.233 0v-8.567h.996v8.566h-.996zm9.377-6.07c0 .866-.296 1.533-.887 2-.592.467-1.439.7-2.54.7h-1.008v3.37h-.996v-8.567h2.22c2.141 0 3.211.832 3.211 2.496zm-4.435 1.845h.896c.883 0 1.522-.143 1.916-.428.395-.285.592-.742.592-1.371 0-.566-.185-.988-.556-1.266-.372-.277-.95-.416-1.735-.416h-1.113v3.48zm11.604 4.224h-4.776v-8.566h4.776v.885h-3.78v2.76h3.551v.878h-3.55V42.8h3.779v.89z"/></g></svg>
   </div>
 </div>
</div>