johnpolacek.github.io - Scrolldeck plugin
scrolldeck.js









Search Preview

scrolldeck.js

johnpolacek.github.io
How to Use Examples Credits Use left/right arrow to change slides scrolldeck created by Chicago Web Developer John Polace
.io > johnpolacek.github.io

SEO audit: Content analysis

Language Error! No language localisation is found.
Title scrolldeck.js
Text / HTML ratio 51 %
Frame Excellent! The website does not use iFrame solutions.
Flash Excellent! The website does not have any flash contents.
Keywords cloud slide jQuery slides scrolldeck paragraph deck default Scrollorama animations documentreadyfunction var fade easing fly
linking ProTip class=animatebuild =
Keywords consistency
Keyword Content Title Description Headings
slide 6
jQuery 4
slides 4
scrolldeck 4
4
paragraph 4
Headings
H1 H2 H3 H4 H5 H6
4 0 0 0 0 0
Images We found 2 images on this web page.

SEO Keywords (Single)

Keyword Occurrence Density
slide 6 0.30 %
jQuery 4 0.20 %
slides 4 0.20 %
scrolldeck 4 0.20 %
4 0.20 %
paragraph 4 0.20 %
deck 4 0.20 %
default 3 0.15 %
Scrollorama 3 0.15 %
animations 3 0.15 %
documentreadyfunction 2 0.10 %
var 2 0.10 %
fade 2 0.10 %
easing 2 0.10 %
fly 2 0.10 %
2 0.10 %
linking 2 0.10 %
ProTip 2 0.10 %
class=animatebuild 2 0.10 %
= 2 0.10 %

SEO Keywords (Two Word)

Keyword Occurrence Density
paragraph will 4 0.20 %
the default 3 0.15 %
How to 2 0.10 %

2 0.10 %
will fly 2 0.10 %
fly in 2 0.10 %
new scrolldeck 2 0.10 %
= new 2 0.10 %
deck = 2 0.10 %
var deck 2 0.10 %
fade in 2 0.10 %
in from 2 0.10 %
from the 2 0.10 %
slide deck 2 0.10 %
the slide 2 0.10 %
all the 2 0.10 %

2 0.10 %
2 0.10 %
documentreadyfunction var 2 0.10 %
will fade 2 0.10 %

SEO Keywords (Three Word)

Keyword Occurrence Density Possible Spam
How to Use 2 0.10 % No
paragraph will fly 2 0.10 % No
will fade in 2 0.10 % No
paragraph will fade 2 0.10 % No
documentreadyfunction var deck 2 0.10 % No
deck = new 2 0.10 % No
= new scrolldeck 2 0.10 % No
in from the 2 0.10 % No
fly in from 2 0.10 % No
will fly in 2 0.10 % No
var deck = 2 0.10 % No
or animatebuild classes 1 0.05 % No
until all the 1 0.05 % No

This slide will

 1 0.05 % No
slide will get 1 0.05 % No
will get be 1 0.05 % No
get be ’pinned‘ 1 0.05 % No
be ’pinned‘ to 1 0.05 % No
’pinned‘ to the 1 0.05 % No
to the top 1 0.05 % No

SEO Keywords (Four Word)

Keyword Occurrence Density Possible Spam
var deck = new 2 0.10 % No
paragraph will fly in 2 0.10 % No
deck = new scrolldeck 2 0.10 % No
fly in from the 2 0.10 % No
will fly in from 2 0.10 % No
documentreadyfunction var deck = 2 0.10 % No
paragraph will fade in 2 0.10 % No
databuild=1>This paragraph will fade 1 0.05 % No
’pinned‘ to the top 1 0.05 % No
right

 1 0.05 % No
in the default animation

 1 0.05 % No

This

 1 0.05 % No

This slide

 1 0.05 % No
class=slide>

This slide will

 1 0.05 % No

This slide will get

 1 0.05 % No
slide will get be 1 0.05 % No
will get be ’pinned‘ 1 0.05 % No
get be ’pinned‘ to 1 0.05 % No
be ’pinned‘ to the 1 0.05 % No
fade in the default 1 0.05 % No

Internal links in - johnpolacek.github.io

johnpolacek.github.io/styled-starter
Styled Starter | Starter Kit with React, Next.js and Styled Components
johnpolacek.github.io/tweendeck
TweenDeck
johnpolacek.github.io/design-system-playground
Design System Playground
johnpolacek.github.io/expressive-css
Expressive CSS
johnpolacek.github.io/simple-grid
Simple Grid
johnpolacek.github.io/Responsivator
Responsivator
johnpolacek.github.io/superscrollorama
SUPERSCROLLORAMA
johnpolacek.github.io/stacktable.js
stacktable.js
Scrolldeck plugin
scrolldeck.js
johnpolacek.github.io/scrolldeck.js/decks/responsive/
What The Heck Is Responsive Web Design?

Johnpolacek.github.io Spined HTML

scrolldeck.js How to Use Examples Credits Use left/right thunderstroke to transpiration slides scrolldeck created by Chicago Web Developer John Polacek. I work at at AuctionsByCellular. We make mobile prompting and vendition software for charities. Follow @johnpolacek A jQuery plugin for making scrolling presentation decks For example: animations, fullscreen images or parallaxing Powered by Scrollorama Download: zip tar How to Use Build a web page with each slide as a div. Pro-Tip: Use rem’s to make content scale (resize this window to see) Create section navigation by linking to slide id’s (optional) After linking all the required scripts (jQuery, Scrollorama, scrollTo, easing & scrolldeck), create the slide deck on document ready event. $(document).ready(function() { var deck = new $.scrolldeck(); }); You can configure the settings as follows(example has the default config values assigned) $(document).ready(function() { var deck = new $.scrolldeck({ buttons: '.nav-button', slides: '.slide', duration: 600, easing: 'easeInOutExpo', offset: 0 }); }); Pro-Tip: To hibernate the scrollbar, set html{overflow:hidden;} in your css Add animations to slides by subtracting the "animate-in" or "animate-build" classes to elements in your slides. <div class="slide"> <p class="animate-in" data-animation="fly-in-left">This paragraph will fly in from the left.</p> <p class="animate-in" data-animation="fly-in-right">This paragraph will fly in from the right.</p> </div> <div class="slide"> <p>This slide will get be ’pinned‘ to the top of the screen until all the slide volatility builds are complete.</p> <p class="animate-build" data-build="1">This paragraph will fade in (the default animation)</p> <p class="animate-build" data-animation="space-in" data-build="2">This paragraph will fade in while its letter spacing contracts to normal.</p> </div> Available animations are "fly-in-left", "fly-in-right", "space-in" and the default which is "fade-in" Examples Slide Animations Example(What The Heck Is Responsive Web Design) Image Slides Example(Infographics Are Cool) jQuery Parallax Plugin Example Credits scrolldeck.js & Scrollorama by John Polacek jQuery ScrollTo by Ariel Flesler Inspired by other tomfool slide deck js libraries: Pitch Deck, deck.js and reveal.js