Do you want to learn how to build a one page website with an elegant SVG scrolling animation?
Let me walk you through my workflow and teach you how to build a modern, scrolling one page website without any headaches.
The Skrollr Workshop is the perfect follow-up to the Parallax Scrolling Master Class.
What you’ll learn
The Skrollr Workshop is a collection of step-by-step demos which will teach you:
- how to create, export, optimize and embed SVG
- how to use Skrollr to create SVG scrolling animation
- how to create a fullscreen layout for cross-fade effect
- how to speed up your Sublime Text workflow
- and much more!
You’ll get more than 3 hours of video tutorials, accompanied by downloadable demo files so you can follow every step along the way.
Table of content
- Introduction – Watch this video at the top of this page.
- Creating SVG – draw SVG in Illustrator
- Exporting SVG – export SVG from Photoshop and Illustrator
- Fullscreen layout – creating css layout for a pixel perfect fullscreen design
- Resizing SVG – resize SVG to fullscreen, keeping the aspect ratio and precise position on window resize
- Multiple background layers – create multiple fullscreen background layers
- Draw SVG line with Skrollr – Exercise – how to animate SVG line using Skrollr
- SVG animation continue – more SVG line and shape animations
- Cross-fade background layers – cross-fade transition on fullscreen background layers, animation easing
- Skrollr data-attributes to fade in/out content – Exercise – practice what you’ve learned so far
- Fading content – my approach is revealed
- Animating iMac from the right – Exercise – practice horizontal animation with Skrollr
- Zoom out effect – how to scale element down on scroll
- Mobile and responsive approach – demystifying the ideal workflow, the key points for mobile approach
- Turn animations off for mobile – how and why you should do this
- Adding Skrollr Menu – how to add Skrollr menu to your project
- FAQs – submit your questions
- Total class duration: 3h 09min
- One-off payment, with lifetime access.
- Video files not available for download.
- Learn at your own pace.
Can I download the video files and watch them offline?
No, unfortunately the video files are not currently available for download and you can only watch them while logged in to ihatetomatoes.net.
Does it have “closed caption” so I can read the captions while the video is playing.
No, unfortunately the videos don’t have any subtitles or closed captions at the moment.
Petr Tichy is a professional front-end developer with many years of experience in web development.
In this class he shares his knowledge and experience gained by creating number of parallax scrolling tutorials and websites such as Merry Christmallax, Happy 25th Birthday Game Boy and Merry SVG Christmas.
- anyone interested in learning how to create an elegant SVG line scrolling animation with cross-fade effect
- designers and developers with a working knowledge of HTML and CSS
- curious front-end developers trying to boost their skill set
- anyone who has ever tried to use Skrollr and found that the data attributes are super confusing
- Learn how to create an elegant SVG line animation similar to Squarespace 7 Cover page.
- SVG line explained in simple step-by-step demos.
- This workshop will show you the ideal workflow for creating, exporting, embedding and animating SVG line with Skrollr.
- Speed up your Sublime Text workflow with a few goodies, plugins and Petr’s tips.
- Working knowledge of html5 and css3.
- Positive attitude towards learning new techniques.
- A genuine interest in scroll triggered animations.
- Tomato lovers more than welcome!
100% MONEY BACK GUARANTEE
Watch the first 5 course videos and if you are not completely satisfied I’ll give you your money back.
I am so confident that you will enjoy the course that you have 14 days to watch the first 5 videos, if you feel you are not learning enough you can enjoy my 100% money back guarantee.
Simply contact me for prompt refund of the full purchase price.