Discover codyhouse/page-scroll-effects Open Source project

1

codyhouse-framework

A lightweight front-end framework for building accessible, bespoke interfaces.

CSS

1,166

2

vertical-timeline

An easy to customize, responsive timeline.

HTML

572

3

animated-headline

A collection of animated headlines

CSS

239

4

horizontal-timeline

An easy to customize, horizontal timeline powered by CSS and JavaScript.

JavaScript

206

5

image-comparison-slider

A draggable slider to quickly compare 2 images

JavaScript

197

6

schedule-template

A simple template that lets you display events on a timeline, as well as organize them in groups (week days, conference rooms etc…)

JavaScript

183

7

points-of-interest

A resource to highlight the points of interest of your products.

JavaScript

159

8

hero-slider

A full-width, responsive and easy to customise slideshow.

CSS

145

9

mega-dropdown

A responsive and easy to customise mega-dropdown component.

CSS

132

10

back-to-top

Back to top link to smoothly scroll back to the top of the page.

HTML

119

11

mega-site-navigation

A responsive navigation for mega sites

JavaScript

114

12

responsive-sidebar-navigation

An easy-to-integrate side, vertical navigation, ideal for dashboards and admin areas.

JavaScript

112

13

virgo-template

Virgo is a free HTML, CSS, JS template built using the CodyHouse Components and Framework.

CSS

102

14

auto-hiding-navigation

A simple navigation that auto-hides when the user scrolls down, and becomes visible when the user scrolls up.

HTML

102

15

faq-template

An easy to customize template for the FAQ section of your project, with the questions/answers grouped in categories to ease the navigation.

HTML

97

16

add-to-cart-interaction

A floating cart that slides in when the user decides to buy an item.

JavaScript

96

17

content-filter

A slide-in filter panel powered by CSS and jQuery.

CSS

93

18

stripe.com-navigation

A morphing dropdown that animates according to the size of its content.

CSS

86

19

multi-level-accordion-menu

A simple CSS accordion menu with support for sub level items.

HTML

86

20

dark-light-mode-switch

How to create a dark\light mode switch in CSS and Javascript

CSS

83

21

ink-transition-effect

An ink bleed transition effect, powered by CSS animations.

CSS

82

22

responsive-tabbed-navigation

A tabbed navigation with support for both horizontal and vertical menu positioning.

HTML

81

23

animated-transition-effects

A library of animated transition effects, powered by CSS Animations

CSS

80

24

360-degrees-product-viewer

A simple, interactive resource that can be used to provide a virtual tour of your product.

CSS

80

25

flashgrid

Lightweight CSS Grid System

79

26

login-signup-modal

A modal window to login/signup into your website

CSS

78

27

vertical-fixed-navigation

A side navigation which allows users to easily browse the page.

JavaScript

76

28

product-builder

CSS

76

29

style-guide-template

A customizable Style Guide template

CSS

74

30

stretchy-navigation

CSS

72

31

smart-fixed-navigation

A fixed navigation to access the menu at any time while experiencing your website

JavaScript

61

32

product-quick-view

A 'product quick view' modal window, animated using CSS3 and Velocity.js

JavaScript

60

33

products-comparison-table

A responsive table to compare and filter through multiple products.

CSS

60

34

codyframe

The intuitive CSS framework.

CSS

60

35

full-screen-pushing-navigation

A full page menu, that replaces the current content by pushing it off the screen.

CSS

58

36

breadcrumbs-and-multistep-indicator

CSS

57

37

3d-rotating-navigation

A 3D rotating navigation, powered by CSS transformations.

JavaScript

57

38

morphing-modal-window

A call-to-action button that animates and turns into a full-size modal window

CSS

57

39

fixed-backgrounds

Alternate fixed and scroll backgrounds

HTML

57

40

image-mask-effect

An immersive transition effect powered by image masks and CSS transforms.

CSS

57

41

nugget-template

Starting template for CodyHouse resources

CSS

56

42

pricing-tables

Simple responsive pricing tables

CSS

55

43

animated-page-transition

CSS

54

44

custom-google-map

An easy to customise google map

JavaScript

54

45

fixed-background-effect

CSS

51

46

expandable-image-gallery

An image that expands on click, going full-width and turning into a gallery.

CSS

51

47

slide-in-panel

A CSS3 and JavaScript powered slide-in panel, to quickly show side content, notifications or profile information.

CSS

49

48

mobile-app-introduction-template

A basic template to showcase the best features of your app

JavaScript

47

49

full-page-intro-and-navigation

An intro page with a full width background image, a bold animated menu and an iOS-like blurred effect behind the navigation

JavaScript

46

50

rounded-animated-navigation

An experimental full-screen navigation that expands within a circle.

JavaScript

45

51

reading-progress-indicator

HTML

45

52

side-shopping-cart

Animated side shopping cart

JavaScript

44

53

confirmation-popup

A simple responsive confirmation dialog box

JavaScript

38

54

parallax-hero-image

A full-width figure element, with floating images distributed in a 3D space

CSS

37

55

secondary-expandable-navigation

Secondary expandable navigation

JavaScript

37

56

sliding-panels-template

CSS

37

57

3d-folding-panel

CSS

35

58

secondary-fixed-navigation

A secondary navigation intended for users who want a quick overview of the page content, and be able to easily move from one section of the page to the other.

JavaScript

35

59

presentation-slideshow

CSS

34

60

product-tour

CSS

33

61

side-team-member-bio

Animated side team member biography.

JavaScript

32

62

cross-reference-table

A responsive cross reference table

JavaScript

32

63

full-screen-popout-navigation

A Fixed menu that drives users' attention to a couple of call-to-action buttons first, then let them explore the full-screen navigation

JavaScript

32

64

squeezebox-portfolio-template

CSS

31

65

animated-svg-hero-slider

CSS

31

66

animated-intro-section

CSS

31

67

contact-form

CSS

29

68

client-testimonials-carousel

A responsive carousel showcasing selected client testimonials

JavaScript

29

69

immersive-video-template

A full-screen video presentation, that is resized and animated to become the content of a mobile device.

CSS

29

70

radial-svg-slider

CSS

28

71

clipped-svg-slider

A simple slider, with morphing preview images animated using SVG properties.

CSS

28

72

secondary-sliding-navigation

Secondary menu that slides over the main navigation

CSS

27

73

3d-bold-navigation

HTML

27

74

expandable-project-presentation

A gallery of project preview images that expand on click to reveal the full case study.

CSS

27

75

advanced-search-form

CSS

27

76

animated-sign-up-flow

CSS

26

77

animated-page-transition-2

HTML

26

78

3d-items-quick-view

A simple 3D animation for your gallery items.

JavaScript

25

79

3d-curtain-template

A list of split blocks that reunite on scrolling, simulating a movement along the z-axis.

CSS

25

80

zoom-out-intro-effect

A full-width header image, animated using the CSS3 scale property to simulate a 3D zoom-out effect and reveal the main content of the page

JavaScript

25

81

3d-animated-mockup

A simple template to showcase your application features through a smooth 3d animation.

JavaScript

25

82

bouncy-content-filter

A space-saving content filter to switch from one category to the other in a fancy way

JavaScript

24

83

3d-portfolio-template

CSS

23

84

project-cards-template

CSS

23

85

vertical-fixed-navigation-2

CSS

22

86

quick-add-to-cart

CSS

21

87

pagination

A mobile-friendly pagination component

CSS

21

88

icons-filling-effect

An eye-catching filling effect for your icons, that can be used to make a simple page look cool and dynamic.

CSS

21

89

animated-svg-image-slider

HTML

21

90

animated-svg-icon

How animate an SVG icon using CSS and Snap.svg library.

JavaScript

21

91

product-preview-slider

CSS

20

92

responsive-newsletter-form

A minimal and responsive newsletter form with the addition of some subtle CSS3 animations to enrich the user experience.

JavaScript

20

93

codyframe-template-for-codrops

A website template built with CodyFrame

CSS

19

94

bouncy-navigation

A full-screen navigation, with floating menu items.

CSS

19

95

2-blocks-template

CSS

16

96

pointy-slider

CSS

16

97

codyhouse-vscode-snippets

CodyFrame Snippets for VSCode.

14

98

svg-modal-window

CSS

14

99

codyframe-gulp-starter-template

Gulp starter template for CodyFrame

CSS

12

100

codyhouse-wp-config

Configuration files for your WordPress theme

JavaScript

9

codyhouse/page-scroll-effects

codyhouse

Reviews

Repository Details

Page Scroll Effects

More Repositories