CSS https://shivanjaikaran.com/ en Add Parallax Nodes from a View to Drupal 8 With ScrollMagic https://shivanjaikaran.com/add-parallax-nodes-view-drupal-8-scrollmagic <span>Add Parallax Nodes from a View to Drupal 8 With ScrollMagic</span> <span><span>admin</span></span> <span>Mon, 01/20/2020 - 06:07</span> <div><p>In this tutorial I will explain how I accomplished taking a listing of nodes that came from a View and created a Parallax effect using the Bootstrap theme from Drupal 8.</p> <p><a href="https://gitlab.com/xamount/parallax-demo" rel="nofollow">The code in this tutorial can be found on GitLab.</a> </p> <p>To use the code in the repos, you can:</p> <ol> <li>Clone the repos locally</li> <li>Run composer install from the root folder</li> <li>Run drush config:import -y </li> </ol> <p>I would like to refer to this article which explains how to <a href="https://www.ostraining.com/blog/drupal/add-parallax-styled-blocks-to-your-drupal-8-theme/" rel="nofollow">Add Parallax Blocks to Drupal 8 With ScrollMagic</a>. I got my ideas and most of the code from there.</p> <p>You will need to have Drupal 8 installed with Views and a <a href="https://www.ostraining.com/blog/drupal/create-a-drupal-8-bootstrap-subtheme-using-cdn/" rel="nofollow">Bootstrap subtheme set up</a>.</p> <p>For this tutorial, I am using a simple Page content type that I created with 3 fields: Title, Body and Background Image.</p> <p>You should then create a View that lists this Page content type. I am listing the Body field and Background Image field in my example. I am keeping my Page content type and View very simple for explanation purposes. But you can set up more complex Views and content types as you wish. You just need at least an image field (or you can place a background image to an existing content type field via CSS as well).</p> <p><strong>Step #1 - Configure the Bootstrap theme</strong></p> <p>Because Parallax effects are usually full width, you should turn on the Fluid container option in the Bootstrap theme menu.</p> <ul> <li>Enter your subtheme Boothstrap theme settings.</li> <li>Under General &gt;&gt; Container check the Fluid container box<img alt="Fluid checkbox" data-entity-type="file" data-entity-uuid="63427687-862f-44c2-8fe0-702819900f19" height="222" src="/sites/default/files/inline-images/fluid.png" width="482" /></li> </ul> <p><strong>Step #2 - Set up your Content Type and Views.</strong></p> <p>Here is my Page content type with 3 fields: Title (not show in in screenshot), Body and Background image</p> <p><img alt="Page content type fields" data-entity-type="file" data-entity-uuid="269a8101-beae-47ef-ba68-a1378278760b" height="215" src="/sites/default/files/inline-images/page_fields.png" width="710" /></p> <p>Here is my View. It's a pretty much standard View which just lists the Page content type and creates a page out of it. I am using the image field here as the background image for the Parallax. You can also use another field (text or whatever) and set a CSS background as the image.</p> <p><img alt="View listing page content types" data-entity-type="file" data-entity-uuid="f18ae1ae-2b92-4dcf-916a-f6bda9a5c76f" height="422" src="/sites/default/files/inline-images/view.png" width="854" /></p> <p>Now create some Page content and go to the View page to see the listing of your content.</p> <p><strong>Step #3 - Style the View using CSS</strong></p> <p>Here is my CSS:</p> <p><code>.view-homepage { </code></p> <p><code>  .views-row { text-align: center; position: relative; overflow: hidden; height: 500px; }</code></p> <p><code>  .views-field-field-background-image { position: absolute; width: 100%; height: 140%; } </code></p> <p><code>  .views-field-body { </code></p> <p><code>    position: relative; top: 50%;<br />     -webkit-transform: translateY(-50%);<br />     -ms-transform: translateY(-50%);<br />     transform: translateY(-50%);<br />     color: #fff;<br />   }<br /> }</code></p> <p><strong>Step #4 - Get the ScrollMagic files</strong></p> <p>Go to <a href="https://github.com/janpaepke/ScrollMagic/" rel="nofollow">Github</a> and download/extract library.</p> <p>Now go to your theme folder and create a folder called /js/ and move these files into the folder</p> <ul> <li>animation.gsap.min.js</li> <li>ScrollMagic.min.js</li> <li>TweenMax.min.js</li> <li>and also manually create a blank parallax.js</li> </ul> <p>You now need to tell the theme to load the js libraries. To do that, open your_theme/your_theme.libraries.yml:</p> <p><code>global-styling:<br />   css:<br />     theme:<br />      css/style.css: {} </code></p> <p><code>  js:<br />     js/ScrollMagic.min.js: {}<br />     js/animation.gsap.min.js: {}<br />     js/TweenMax.min.js: {}<br />     js/parallax.js: {}<br />   dependencies:<br />     - core/drupal<br />     - core/jquery </code></p> <p><strong>Step #5 Add the Parallax JS code to parallax.js</strong></p> <p><code>(function ($) {<br />     'use strict';<br />     Drupal.behaviors.myBehavior = {<br />         attach: function (context, settings) {</code></p> <p><code>            var controller = new ScrollMagic.Controller();</code></p> <p><code>            $('.views-row').each(function (index) {</code></p> <p><code>                var $bg = $(this).find('.views-field-field-background-image');<br />                 var $content = $(this).find('.views-field-body');</code></p> <p><code>                var tl = new TimelineMax();<br />                 tl<br />                     .from($bg, 2, {y: '-40%', ease: Power0.easeNone}, 0)<br />                     .from($content, 1, {autoAlpha: 0, ease: Power0.easeNone}, 0.4)<br />                 ;</code></p> <p><code>                var scene = new ScrollMagic.Scene({<br />                     triggerElement: this,<br />                     triggerHook: 1,<br />                     duration: "100%"<br />                 })<br />                 .setTween(tl)<br />                 .addTo(controller);<br />             });<br />         }<br />     }<br /> }(jQuery));</code></p> <p>Make sure the images you are using are big enough for the max width you want to display.</p> <p>You should now have a nice parallax scrolling effect for each node in the View list.</p> <p><img alt="Parallax example" data-entity-type="file" data-entity-uuid="5edd4b87-6dec-44f9-a919-2c5621bb556c" height="277" src="/sites/default/files/inline-images/parallax.gif" width="705" /></p> </div> <div> <div>Tags</div> <div> <div><a href="/tag/drupal" hreflang="en">Drupal</a></div> <div><a href="/taxonomy/term/81" hreflang="en">Drupal 8</a></div> <div><a href="/tag/drupal-planet" hreflang="en">Drupal Planet</a></div> <div><a href="/taxonomy/term/82" hreflang="en">CSS</a></div> <div><a href="/taxonomy/term/83" hreflang="en">Parallax</a></div> </div> </div> <section class="comments" > <h2>Add new comment</h2> <drupal-render-placeholder callback="comment.lazy_builders:renderForm" arguments="0=node&amp;1=61&amp;2=comment_node_page&amp;3=comment_node_page" token="WMY4_CR3wMHU671RWz9mYD2ti-PIk8em8dGPdokPrrQ"></drupal-render-placeholder> </section> <div id="field-language-display"><div class="js-form-item form-item js-form-type-item form-item- js-form-item-"> <label>Language</label> English </div> </div> Mon, 20 Jan 2020 10:07:06 +0000 admin 61 at https://shivanjaikaran.com CSS Trick: How to target all elements besides the first https://shivanjaikaran.com/css-trick-how-target-all-elements-besides-first <span>CSS Trick: How to target all elements besides the first</span> <span><span>admin</span></span> <span>Wed, 01/09/2019 - 04:39</span> <div><p>This CSS trick is quite simple. Let's say you have:</p> <p>&lt;ul&gt;<br />   &lt;li&gt; list item &lt;/li&gt;<br />   &lt;li&gt; list item &lt;/li&gt;<br />   &lt;li&gt; list item &lt;/li&gt;<br /> &lt;/ul&gt;</p> <p>If you want to target the first &lt;li&gt;, you can do it as follows:</p> <p><code>ul li { background-color: #FFFFFF; /* applies to every li */ } </code></p> <p><code>ul li:first-child { background-color: blue; /* targets only the first li */ }</code></p> <p>This works in all major browsers.</p> <p>For :first-child to work in IE8 and earlier, a &lt;!DOCTYPE&gt; must be declared.</p> </div> <div> <div>Tags</div> <div> <div><a href="/taxonomy/term/82" hreflang="en">CSS</a></div> </div> </div> <section class="comments" > <h2>Add new comment</h2> <drupal-render-placeholder callback="comment.lazy_builders:renderForm" arguments="0=node&amp;1=57&amp;2=comment_node_page&amp;3=comment_node_page" token="Ktt2t7IOqF5uzfrw3Y_4QqBKJoDZnGtcqkXTcd3cFjs"></drupal-render-placeholder> </section> <div id="field-language-display"><div class="js-form-item form-item js-form-type-item form-item- js-form-item-"> <label>Language</label> English </div> </div> Wed, 09 Jan 2019 08:39:01 +0000 admin 57 at https://shivanjaikaran.com