#scrolldown animations | Explore Tumblr posts and blogs

413-request-entity-too-large · 6 years ago

Text

How to Hide/Reveal a Sticky Header on Scroll (With JavaScript)

Have you ever seen one of those fixed (or “sticky’) header bars which disappear when you begin scrolling down the page, then reappear whenever you start to scroll back up? In this exercise we’ll learn how to build our own using a bit of JavaScript.

Why?

Sticky components (such as headers) are extremely popular in the world of web design; they can keep essential UI elements permanently in view, and easily accessible should users need them. However, under certain circumstances (if the headers hold lots of content, or the viewport size and orientation limit the amount of available screen space) sticky headers can be obtrusive.

“When implemented wrong, sticky navigation elements can serve as a distraction from the actual content.” – Aaron Andre Chichioco

A sticky header which disappears from view when not needed (ie: when the user is scrolling to see more content) is an excellent compromise.

We can achieve this kind of effect by using an external library like Headroom.js, but we’re going to learn the mechanics of what’s underneath by building something ourselves. As a bonus, we’ll also make the header menu fully functional, ready for you to add your own customization.

What We’re Building

Here’s what we're going to create (scroll to test the behavior):

Let’s get started!

1. Begin With the Page Markup

To start off our sticky header we’ll open the markup with a header which contains a nav. Within it, we’ll put the menu toggle button and the menu itself. Just for enriching the page with some dummy content, we’ll also define three full-screen sections. We’ll add a few background images to them taken from a previous tutorial.

Here’s the page markup:

2. Add the Sticky Header CSS

Let’s add some CSS rules to improve the way our header looks and (to a degree) behaves.

For the sake of simplicity, I won’t walk through the initial reset styles, but feel free to look at them by clicking at the CSS tab of the demo project.

The header styles are pretty straightforward, but two things are important:

Firstly, both the toggle menu wrapper and the menu will be fixed positioned elements.

Secondly, the menu will initially be hidden.

The styles related to the header are as follows:

/*CUSTOM VARIABLES HERE*/ .trigger-menu-wrapper { position: fixed; top: 0; left: 0; right: 0; display: flex; justify-content: center; padding: 10px; z-index: 2; background: var(--lightpurple); transition: transform 0.4s; } .page-header .trigger-menu { display: flex; align-items: center; font-size: 1.5rem; color: var(--white); } .page-header .trigger-menu svg { fill: var(--white); margin-right: 5px; transition: transform 0.3s; } .page-header .menu { position: fixed; top: 0; left: 0; right: 0; bottom: 0; display: none; text-align: center; padding: 15vh 0 5vh; overflow: auto; z-index: 1; } .page-header .menu a { font-size: 3rem; } .page-header .sub-menu a { font-size: 1.5rem; }

The sections will behave as full-screen elements with a background image and a dark overlay on top of it. These will give us something to scroll past so we can see the hide/reveal behavior of our header:

.page-main section { position: relative; background-repeat: no-repeat; background-position: center; background-size: cover; height: 100vh; } .page-main section::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.25); }

3. Add the JavaScript

As a next step, let’s add some behavior to the menu.

Toggle Menu

Each time we click on the toggle button, the menu’s visibility will change. If it’s hidden, it’ll appear. But if it’s visible, it’ll disappear.

We’re handling this in quite a rudimentary way, but it gives you the potential to tailor things to your liking. Here’s the required JavaScript code:

const body = document.body; const triggerMenu = document.querySelector(".page-header .trigger-menu"); triggerMenu.addEventListener("click", () => { body.classList.toggle("menu-open"); });

And the related styles:

.page-header .trigger-menu svg { transition: transform 0.3s; } .menu-open { overflow: hidden; } .menu-open .page-header .menu { display: block; } .menu-open .page-header svg { transform: rotate(45deg); }

As you may have noticed, there isn’t any animation during the changes of the menu’s state. That happens because I used the non-animatable display property. If you want to add some kind of animation, replace this property with something animatable like opacity or visibility.

Toggle Header

Let’s now turn our attention to something more interesting.

Each time we scroll down, the toggle button (and the header in general) should disappear with a slide-out animation. If we then scroll up, it should appear with a slide-in animation.

To implement this functionality, we’ll use two helper classes: scroll-up and the scroll-down. More specifically:

As we scroll down, the body will be given the scroll-down class.

As we scroll up, it’ll be given the scroll-up class.

If we scroll to the top of the page, it will lose its scroll-up class.

To detect the scrolling direction, we’ll store the last scroll position in a variable (lastScroll). Initially the value of this variable will be 0. Then as we scroll, we’ll check if the new position is greater than or less than the old one. Based on the result of that condition, we’ll apply the corresponding class to the body.

Here’s the JavaScript code to handle that:

And the associated styles:

/*CUSTOM VARIABLES HERE*/ .trigger-menu-wrapper { transition: transform 0.4s; } .scroll-down .trigger-menu-wrapper { transform: translate3d(0, -100%, 0); } .scroll-up .trigger-menu-wrapper { transform: none; } .scroll-up:not(.menu-open) .trigger-menu-wrapper { background: var(--lightpurple); box-shadow: 0 0 10px rgba(0, 0, 0, 0.35); }

Conclusion

That’s it, folks! During this exercise we learned how to toggle a sticky header’s visibility depending on the scrolling direction.

I hope you found this tutorial useful and that you’ll take advantage of it in your upcoming projects. As always, thanks a lot for reading!

More Sticky Tutorials

Stick around! There’s plenty more to learn about sticky behavior in web design:

Patterns

How to Create a Fixed Header Which Animates on Page Scroll

George Martsoukos

WordPress

How to Make a Sticky Menu in WordPress

Rachel McCollin

CSS

Sticky Positioning with Nothing but CSS

Thoriq Firdaus

UI Design

How to Create a “Sticky” Floating Video on Page Scroll

Louie Rootfield

0 notes

themesparadise · 7 years ago

Text

Settimo Elemento - Multi-Purpose Joomla Theme

https://themesparadise.com/?p=12870

Settimo Elemento is the responsive multi-purpose Joomla template for Joomla three which serves as an incredible starter theme to arrange your web site from scratch with a number of preset layouts for sure wants. Settimo Elemento can also be multi-concept theme, you should utilize it for fullwitdh standart, fullheight of header sliding, one-page, coming-soon Web page and and many others.This template is extremely appropriate with many of the in style third get together Joomla extensions. Empowered by the strong Warp 7 Framework with UIKIT and Bootstrap three at core. Numerous thought and care have been put into Settimo Elemento making it a pleasure to make use of. Settimo Elemento is loaded with choices, and has highly effective customization choices. This theme can also be nicely suited for Enterprise, Company, Artistic, Presentation, Private, Weblog and and many others. Settimo Elemento is responsive prepared and absolutely customizable with the customization software web page.

Template Options

Responsive HTML5 base template Design supporting Cellphone, Tablets and Desktops

2 variations header Slider type an place

Absolutely animated type web site refers to materials design

Very distinctive Menu Structure

Fancy Weblog type

Preloader allow or disable choice

Cookie Regulation allow or disable choice

Overlay Patterns

14 type separator

Shortcode with Rokcandy

three variations Sticky Menu

Distinctive change Menu when scrolling down

Parallax and stuck background type sections accessible

Coming Quickly Web page structure with countdown type included

Template based mostly on final powerfully Warp 7 Framework from Yootheme

In-built Gzip Compress and Knowledge URI perform for sooner web site loading

Used underneath full extensible framework structure

In-built many wonderful Responsive Sliders : Pagepiling , OWL Carousel and Widgetkit Slideshow

21 Modules Place

6 Colour in Mild and Darkish Themes totally different Kinds + Limitless Customization

LESS CSS auto-compilation

Superior typography – Highly effective typography from UIKIT offers styling for tables, varieties, buttons, and different commonplace interface components.

Versatile widgets for template customization

XML pushed and with overrides for unprecedented ranges of customization

A number of type choices, Simply configured from backend.

All Put in Extensions (Elements, Modules, Plugin) Included

Nicely Documented

Absolutely appropriate for all main browser

Legitimate HTML5

Native Quickstart Bundle included with the most effective Backup System from Akeeba

Customized 404 Error web page and offline web page

In-built Pricing Desk ( Appropriate for enterprise web sites )

Pictures Portfolio Structure web page

2 totally different options Structure web page

Many built-in options similar to Google Analytics, to-top clean slider, and many others.

Fashion Colour Themes Settimo Elemento template has 7 Colour in mild and darkish themes totally different type :

Theme Light – Red

Theme Light – Green

Theme Light – Blue

Theme Light – Asphalt

Theme Dark – Red

Theme Dark – Green

Theme Dark – Gold

Limitless Fashion ( your particular person customized ) – Fashion Customizer Web page

Newest Updates

Model 1.5.zero for Joomla three.four.x - 12 January 2016 - Replace Warp 7 Framework model 7.three.16 - Theme enchancment

Model 1.four.zero for Joomla three.four.x - 25 September 2015 - Replace Warp 7 Framework model 7.three.11 - Theme enchancment

Model 1.three.zero for Joomla three.four.x - 14 September 2015 - Preloader allow or disable choice - Add Sticky Menu Fashion for earlier than scrolling down and solely when scrolling up - Mounted some bugs

Model 1.2.zero for Joomla three.four.three - 06 September 2015 - Replace Warp 7 Framework model 7.three.10 - Extra Parallax impact - Header Conceal after scrolldown choice - Modifications within the organising for photos background and separators - Mounted some bugs - Extra Demo Web page

Model 1.1 - 22 August 2015 - Overlay Patterns - 14 type separator - Shortcode with Rokcandy - Predominant Menu Horizontal - Predominant Menu variation type change by scrolling down - Minor Challenge in Safari Mounted - Brand in Middle choice - Brand Conceal after scrolldown choice - Cookie Regulation Allow/Disable

Model 1.zero - 08 July 2015 - Preliminary Launch

Credit

Warp 7 Framework

Joomla 2.5 – Gavicks – Tabs GK5

OWL Carousel

S5 quick contact

Widgetkit Lite

Google Maps Plugin

RokSprocket

Linea Icons

Kameleon

Extra Info

The inventory imagery used within the stay demo is for preview functions solely and is therefor not included within the obtain package deal.

Purchase Now

0 notes

413-request-entity-too-large · 6 years ago

Text

Build a Static Portfolio With Advanced CSS Bar Chart

In a previous post, I showed you how to build a beautiful fullscreen portfolio page. During that tutorial we also learned how to create a responsive CSS column chart. In this tutorial we’ll build another attractive static portfolio page, this time featuring a pure CSS bar chart without using any external JavaScript library, SVG, or the canvas element!

What We’re Building

Here’s the project we’ll be creating:

We have a lot of exciting things to cover, so let’s get started!

Note: This tutorial assumes some good CSS knowledge. For instance, you should be familiar with CSS positioning and flexbox basics.

Flexbox

A Comprehensive Guide to Flexbox Alignment

Anna Monus

Flexbox

A Comprehensive Guide to Flexbox Ordering & Reordering

Anna Monus

1. Begin With the Page Markup

The page markup consists of a header and three fullscreen sections:

Note: Beyond the elements’ specific classes, our markup contains a number of utility (helper) classes. We’ll use this methodology to keep our CSS as DRY as possible. However, for the sake of readability, within the CSS we won’t group common CSS rules.

2. Define Some Basic Styles

Following what we’ve just discussed above, we first specify some reset rules along with a number of helper classes:

:root { --gray: #cbcfd3; --white: white; --black: #1a1a1a; --lightwhite: whitesmoke; --lightblue: #009dd3; --peach: #ff9469; --transition-delay: 0.3s; --transition-delay-step: 0.3s; --skills-width: 120px; } * { padding: 0; margin: 0; box-sizing: border-box; } ul { list-style: none; } a { text-decoration: none; color: inherit; } .d-block { display: block; } .d-flex { display: flex; } .flex-column { flex-direction: column; } .justify-content-center { justify-content: center; } .justify-content-between { justify-content: space-between; } .align-items-center { align-items: center; } .align-items-end { align-items: flex-end; } .flex-grow-1 { flex-grow: 1; } .vh-100 { height: 100vh; } .position-relative { position: relative; } .position-absolute { position: absolute; } .position-fixed { position: fixed; } .text-center { text-align: center; } .text-gray { color: var(--gray); } .text-lightblue { color: var(--lightblue); } .text-peach { color: var(--peach); } .bg-white { background: var(--white); } .bg-lightwhite { background: var(--lightwhite); } .h1 { font-size: 2.5rem; } .h2 { font-size: 2rem; }

The naming conventions for our helper classes are inspired by Bootstrap 4’s class names.

3. Build the Page Header

The page header includes:

The logo

Main navigation

Header HTML

<header class="position-fixed bg-white page-header"> <nav class="d-flex justify-content-between align-items-center"> <a href="" class="text-peach logo"> <strong>DM</strong> </a> <ul class="d-flex"> <li> <a href="#skills">Skills</a> </li> <li> <a href="#contact">Contact</a> </li> </ul> </nav> </header>

Header CSS

.page-header { left: 0; right: 0; top: 0; padding: 20px; z-index: 10; } .page-header .logo { font-size: 1.7rem; } .page-header li:not(:last-child) { margin-right: 20px; } .page-header a { font-size: 1.1rem; }

4. Build the Hero Section

The first section of our page includes:

A heading

A call-to-action

Here’s what it will look like:

Section #1 HTML

Section #1 CSS

The call-to-action includes a thin line which is animated infinitely, compelling the user to scroll down to see what’s beneath “the fold” (which may or may not exist).

Its styles:

.scroll-down { left: 50%; bottom: 0; transform: translateX(-50%); text-transform: uppercase; transition: all 0.5s; } .scroll-down.is-hidden { opacity: 0; visibility: hidden; } .scroll-down::after { content: ''; display: block; margin: 3px auto 0; width: 1px; height: 60px; background: var(--black); transform-origin: bottom; animation: pulse 3.5s infinite linear; } @keyframes pulse { 0% { transform: scaleY(1); } 50% { transform: scaleY(0.65); } 100% { transform: scaleY(1); } }

Section #1 JavaScript

Initially the call-to-action will be visible. But when the user starts scrolling, it will disappear. More specifically, it will receive the is-hidden class which we have just defined in the styles above.

Here’s the required JavaScript code:

const scrollDown = document.querySelector(".scroll-down"); window.addEventListener("scroll", scrollHandler); function scrollHandler() { window.pageYOffset > 0 ? scrollDown.classList.add("is-hidden") : scrollDown.classList.remove("is-hidden"); }

5. Build the Section #2

The second section of our page includes:

A background image

The bar chart which demonstrates web skills

Here’s what it looks like:

Section #2 HTML

<section class="d-flex vh-100 bg-lightwhite" id="skills"> <div class="position-relative flex-grow-1 bg-img"></div> <div class="d-flex justify-content-center align-items-center flex-grow-1"> <div class="position-relative chart-wrapper"> <ul class="d-flex flex-column chart-skills"> <li class="position-relative"> <span>CSS</span> </li> ... </ul> <ul class="d-flex position-absolute chart-levels"> <li class="flex-grow-1 position-relative"> <span class="position-absolute">Novice</span> </li> ... </ul> </div> </div> </section>

Style the Background Image

The left part of this section contains an image taken from Wordpress Code Backgrounds on Envato Elements. It will give us the atmosphere we’re looking for, whilst inspiring the colors we use elsewhere in the design:

WordPress Code Backgrounds

Some key things:

The image will appear on screens wider than 900px and

we’ll use CSS (via the background-image property) and not HTML (via the img element) to place the image within the page. We choose this method because that gives us an easy way to enhance the image appearance. For example, we’ll skew it by taking advantage of its ::after pseudo-element. You could even play with its colors using background-blend-mode: luminosity;, for example.

Note: By default an img is an empty element and doesn’t have pseudo-elements.

The corresponding styles:

.bg-img { background: #fff url(bg-programming.jpg) no-repeat center / cover; } .bg-img::after { content: ''; position: absolute; top: 0; bottom: 0; right: 0; width: 7rem; background: var(--lightwhite); transform: skew(-5deg); transform-origin: left bottom; } @media screen and (max-width: 600px) { .bg-img { display: none; } }

Style the Chart

At this point we’ll concentrate on the most challenging part of our demo; how to construct the bar chart.

The chart will have two axes. On the y-axis we’ll place the web skills (CSS, HTML, JavaScript, Python, Ruby). On the other x-axis we’ll put the skill levels (Novice, Beginner, Intermediate, Advanced, Expert).

The y-axis

In terms of markup, each skill is a list item placed inside the .chart-skills list. Next, each list item will hold its text within a span element, like this:

We define a fixed width for the span element equal to 120px. To avoid repetition and so we can easily change this value (as other values will depend on it), let’s store it inside a CSS variable:

:root { --skills-width: 120px; } .chart-wrapper .chart-skills span { display: inline-block; width: var(--skills-width); padding: 15px; }

Each list item will contain its own ::before and ::after pseudo-elements:

/*CUSTOM VARIABLES HERE*/ .chart-wrapper .chart-skills li::before, .chart-wrapper .chart-skills li::after { content: ''; position: absolute; top: 25%; left: var(--skills-width); height: 50%; border-top-right-radius: 10px; border-bottom-right-radius: 10px; z-index: 2; }

The ::after pseudo-element will have a light gray color and a static width which is calculated by subtracting the span width from the list item width:

.chart-wrapper .chart-skills li::after { width: calc(100% - var(--skills-width)); background: rgba(211, 211, 211, 0.3); }

Here’s how it looks:

The initial width of all ::before pseudo-elements will be 0:

/*CUSTOM VARIABLES HERE*/ .chart-wrapper .chart-skills li::before { width: 0; background: var(--lightblue); transition: width 0.65s ease-out; }

But as soon as the chart becomes visible in the viewport, their width will be animated and receive a value that will be determined by the associated skill level:

Add Class When in View

There are multiple ways to detect whether an element is visible in the viewport or not. Let’s take advantage of the following handy function extracted from an old, yet popular StackOverflow thread:

function isElementInViewport(el) { var rect = el.getBoundingClientRect(); return ( rect.top >= 0 && rect.left >= 0 && rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && rect.right <= (window.innerWidth || document.documentElement.clientWidth) ); }

If you have read my previous tutorials, you might remember that I’ve also used this function to animate a vertical timeline.

Patterns

Building a Vertical Timeline With CSS and a Touch of JavaScript

George Martsoukos

So, back to the job in hand! When the chart becomes visible in the current viewport, we’ll give it the in-view class.

Here’s the JavaScript code that does this job:

const chartWrapper = document.querySelector(".chart-wrapper"); window.addEventListener("scroll", scrollHandler); function scrollHandler() { if (isElementInViewport(chartWrapper)) chartWrapper.classList.add("in-view"); }

The ::before pseudo-elements should be animated sequentially. To give them the desired transition speed, we’ll use two other CSS variables along with the calc() CSS function.

Here are the CSS styles responsible for revealing those sudo-elements:

:root { ... --transition-delay: 0.3s; --transition-delay-step: 0.3s; --skills-width: 120px; } .chart-wrapper.in-view .chart-skills li:nth-child(1)::before { width: calc(90% - var(--skills-width)); transition-delay: var(--transition-delay); } .chart-wrapper.in-view .chart-skills li:nth-child(2)::before { width: calc(75% - var(--skills-width)); transition-delay: calc( var(--transition-delay) + var(--transition-delay-step) ); } .chart-wrapper.in-view .chart-skills li:nth-child(3)::before { width: calc(62% - var(--skills-width)); transition-delay: calc( var(--transition-delay) + var(--transition-delay-step) * 2 ); } .chart-wrapper.in-view .chart-skills li:nth-child(4)::before { width: calc(49% - var(--skills-width)); transition-delay: calc( var(--transition-delay) + var(--transition-delay-step) * 3 ); } .chart-wrapper.in-view .chart-skills li:nth-child(5)::before { width: calc(38% - var(--skills-width)); transition-delay: calc( var(--transition-delay) + var(--transition-delay-step) * 4 ); }

Keep in mind that Microsoft Edge doesn’t support the above math operations, so if you need to support it, just pass some static values instead, like this:

.chart-wrapper.in-view .chart-skills li:nth-child(2)::before { transition-delay: 0.6s; } .chart-wrapper.in-view .chart-skills li:nth-child(3)::before { transition-delay: 0.9s; }

The x-axis

In terms of markup, each level is a list item placed inside the .chart-levels list. Next, each list item will hold its text within a span element, like this:

<ul class="d-flex position-absolute chart-levels"> <li class="flex-grow-1 position-relative"> <span class="position-absolute">Novice</span> </li> ... </ul>

Some things to note:

We set the list as a flex container. Also, we absolutely position it and give it a left padding equal to the width of the spans of the first list.

We give list items flex-grow: 1 to grow and take up all the available space.

The spans are positioned at the very bottom of their parent list item.

The associated styles for that list:

/*CUSTOM VARIABLES HERE*/ .chart-wrapper .chart-levels { left: 0; bottom: 0; width: 100%; height: 100%; padding-left: var(--skills-width); } .chart-wrapper .chart-levels li { border-right: 1px solid rgba(211, 211, 211, 0.3); } .chart-wrapper .chart-levels li:last-child { border-right: 0; } .chart-wrapper .chart-levels span { bottom: 0; transform: translateY(50px) rotate(45deg); padding: 10px; width: 100%; }

6. Build the Section #3

The third section of our page includes:

A heading

A mailto link

Here’s what it looks like:

Section #3 HTML

7. Go Responsive

We’re almost done! As one last thing, let’s ensure that the text has a solid appearance across all screens. We’ll apply a rule targeting narrow screens:

@media screen and (max-width: 600px) { html { font-size: 12px; } }

One important note here is that in our styles we’ve used rem for setting the font sizes. This approach is really useful because the font sizes are relative to the root element (html). If we decrease its font size like in the code above, the rem-related font sizes will be dynamically decreased. Of course, we could have used rems for the other CSS properties as well.

The final state of our project:

Conclusion

In this tutorial we improved our CSS knowledge by learning how to build an attractive static portfolio page. We went one step further and created a responsive bar chart without using any external JavaScript library, SVG, or the canvas element. Just with plain CSS!

Hopefully this tutorial has given you enough inspiration for building your awesome portfolio site. I’d love to see your work–be sure to share it with us!

Next Steps

If you want to further enhance or extend this demo, here are two things you can do:

Add smooth scrolling behavior to the menu links without using any external JavaScript library.

Use the more effective Intersection Observer API instead of the scroll event for checking whether the chart is visible in the viewport or not.

As always, thanks for reading!

More Practical Projects to Boost Your Front-end Skills

Bootstrap 4

How to Quickly Build Layouts With Bootstrap 4’s Responsive Flexbox Utilities

George Martsoukos

Bootstrap 4

How to Build a Landing Page Template With Bootstrap 4

George Martsoukos

Flexbox

How to Build a Full-Screen Responsive Page With Flexbox

George Martsoukos

Parallax Scrolling

Quick Tip: Create a Very Simple Parallax Effect With CSS & JavaScript

George Martsoukos

0 notes