eriknorris

<nav>
  <a href="#maincode">Maincode</a>
  <a href="#whatis">What is #Maincode?</a>
  <a href="#participate">How to participate?</a>
  <a href="#happening">What's happening?</a>
  <a href="#costs">Costs and price?</a>
  <a href="#sponsorus">Sponsor us</a>
</nav>
<button class="toggle-nav entypo-menu"></button>
<div class="wrapper">

eriknorris

<div id="title" class="slide header">
  <h1>Pure CSS Parallax</h1>
</div>

<div id="slide1" class="slide">
  <div class="title">
    <h1>Slide 1</h1>
    <p>Lorem ipsum dolor sit amet, in velit iudico mandamus sit, persius dolorum in per, postulant mnesarchum cu nam. Malis movet ornatus id vim, feugait detracto est ea, eam eruditi conceptam in. Ne sit explicari interesset. Labores perpetua cum at. Id viris docendi denique vim.</p>
  </div>
</div>

eriknorris

<header>
  <h1>
                Navigation Animations
            </h1>
  <span>
                Inspirational page for navigation animations
            </span>
</header>
<div class="container red topBotomBordersOut">
  <a>HOME</a>

eriknorris

Expandable Animated Card Slider

We have made an expandable animated card slider, it will expand and collapse based on card click. We used owl carousel and jQuery for variable width and responsive slider.

Made by Rajnee Makwana from Yudiz

A Pen by Yudiz Solutions Limited on CodePen.

License.

eriknorris

<div class="card">
  <svg 
       viewBox="0 0 100% 100%"
       xmlns='http://www.w3.org/2000/svg'
       class="noise"
       >
    <filter id='noiseFilter'>
      <feTurbulence 
                    type='fractalNoise' 
                    baseFrequency='0.85' 

eriknorris

<div class="masonry-container">
	<div class="panel">
		<div class="panel-wrapper">
			<div class="panel-overlay">
				<div class="panel-text">
					<div class="panel-title">Crashing Waves</div>
					<div class="panel-tags">
						<span class="tag-icon"><img class="tag-icon-img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/375042/tag-icon.svg" alt=""/></span>
						<span class="tags-list">Landscapes, Waves, Beach</span>
					</div>

eriknorris

Header/Footer Parallax Effect

• A small example of how to create a simple parallax.
• In the example we have a header size of the screen (window), that can be used as a slide.
• The size of the content is dynamic and fully customized.
• The size of the footer is define the main.js file.

A Pen by Hudson Marinho on CodePen.

License.

eriknorris

CSS-Only Horizontal Parallax Gallery

A few beautiful photos from Paris in this experimental gallery. Uses transforms together with perspective property for parallax.

A Pen by Paulina Hetman on CodePen.

License.

eriknorris

<section class="section">
	<h2 class="title">Winter</h2>
</section>
<section class="section">
	<h2 class="title">Spring</h2>
</section>
<section class="section">
	<h2 class="title">Summer</h2>
</section>
<section class="section">

eriknorris

12 nth Selectors

A custom counter,

Position sticky,

nth-child selector,

SCSS loop,