Span text elements as interaction triggers.

hover-text-interactions

Showcasing content is essential. However, if you have much content on a website you have to recognize the behavior of the page for your visitors. There are different techniques to display content most intuitively while still providing the volume of content some visitors may require. One way is to add a "load more" button to display content dynamically.

This project provides a light jQuery solution with a focus (scroll to) the newly displayed content and a fade-out effect when all content is displayed.

jQuery is based on the code from Mahmoud Elmahdi: https://codepen.io/elmahdim/pen/sGkvH

Load More Button with jQuery

CSS Scroll snapping locks the position of the viewport to specific elements on a scrollable container. It's like putting a magnet on top of the top of a section that forces the page to stop scrolling right there.

The property «scroll-snap-type» gives a pure-CSS way to handle this behavior.

Pure CSS Scroll Snap Action like Scrollify

At HeadStarterz we developed this website for the Institute for Swiss and International Tax Law. 

The Institute for Swiss and International Tax Law (ISIS) was founded in 2000 as an independent, non-commercial institute in the legal form of an association. ISIS focuses on the speakers, authors and the approximately 300 members and patrons of the association. The ISIS offer is geared to their needs.

ISIS organizes several high quality seminars per year. In addition, ISIS is the publisher of the tax law online portal zsis) (www.zsis.ch) and participates in other specialist publications.

ISIS) - Institut für Schweizerisches und Internationales Steuerrecht

Modern tax lawyers* are required. In addition to day-to-day business, there are a lot of important news, updates and court rulings waiting to be filtered and consulted. Today, information on tax law is distributed across a wide range of sources. Keeping the overview is not always easy. And above all, it costs valuable time.

taxlawblog.ch offers you the perfect solution. We systematically monitor all available sources of Swiss tax law for you, without gaps or interruption. We make the available information available to you in bundled form, promptly and compactly on our blog. This way you keep track of tax law and are always up to date.

taxlawblog

Masonry.js from David DeSandro is a powerful cascading grid layout library and it works great with flexbox in Webflow. This javascript is a little bit harder to set up than Macy.js but but renders a bit smoother when changing the window size. This project uses masonry in connection with a CMS Blog Collection. Feel free to clone if you like it ;-). 

Source: https://masonry.desandro.com/ | https://github.com/desandro/masonry

Smoothly Masonry Layout with Masonry.js from David DeSandro

Macy.js is a lightweight masonry layout library and it works great in webflow. This project uses masonry in connection with a CMS Blog Collection. Feel free to clone if you like it ;-).

Masonry Layout with Macy.js

This is how to use a Vimeo video as background video in Weblow. You can change the video easily within CMS (Editor).

vimeo-background-video

Portfolio with a fixed slogan that changes content when scrolling through the individual projects. 

This project is inspired by Nelson Abalos Jr's «How to Webflow»: https://youtu.be/Y0W_xYrbzmA. 

The embeded code is compatible with all popular browsers including specific adaptations to Internet Explorer and Edge.

Text reveal masking on scroll

The brand new website of Studio w+e is a multilingual and 100% CMS-driven portfolio site with javascript viewport animations, custom project sliders, fullscreen scollify animation and smooth language changing. The entire content of the page can be controlled by one single cms-collection.

With the greatest possible attention to detail and great passion for design experimentations, Studio w+e realises visual communication solutions that are freaky or classic and always specific. Print - Motion - Branding - Art Direction.

Studio w+e Basel/Paris - Multilingual Portfolio Website

Full CMS-driven home slider based on a clients project with some custom code elements and slider animation.

cms-slider-study

The pure CSS background-clip property lets you control how a background image or color extends beyond an element's content.

background-clip

A free clone-able* Webflow version of my Dezin Design System.

It contains colours, surfaces, typography, buttons, forms, iconography, images, video embeds and tabs. It's a great way to kick start your own projects with a lot of the fundamentals setup and ready to go.

FYI: Dezin is no longer being maintained and has been superseded by Scale, a premium Figma Design System you can sign up for here: http://www.scaledesignsystem.com/

If you would like to support me and are looking to sign up to a Weblow plan, consider using my affiliate link: https://webflow.com/?rfsn=1641264.1575f6

Follow me at:
http://www.christopherdeane.com
https://twitter.com/deanemachine
https://medium.com/@christopherdeane

*I own the Dezin brand and use of it in my community based and commercial products and projects, along with the content displayed in my showreel and tutorial series that are used in the video section. Feel free to use or change everything else 😀.

Dezin - Design System

Tutorial to build mouse interaction here. https://youtu.be/maYjDF1_zMQ

After seeing Niccolò Miranda FatFatFat Festival site I was instantly inspired to see if I could recreate some of the interactions. With my own interpretation I have created a unique micro site with all interactions created in Webflow.

Philipp Roth

About

Skills

About