Illustrierte Website

Eine besondere Website für einen besonderen Anlass

Zu unserem dritten Hochzeitstag habe ich gemeinsam mit Rob Stears eine persönliche illustrierte Website unserer ersten drei Jahre erstellt.

Das Ergebnis ist eine animierte Website mit persönlichen Grafiken, die beim Scrollen Stationen unseres Lebens einblendet.

Details des Projektes

Die Grafiken wurden basierend auf Fotos von uns erstellt.
Der Aufbau der Website ist flexibel, d.h. die Grafiken lassen sich für weitere Projekte leicht austauschen.

Verwendete Technologien

JavaScript mit eigenem Build-Prozess
SASS

Arbeite mit mir!

Du möchtest mit mir gemeinsam an deiner Website arbeiten?
Dann kontaktiere mich und lass uns über dein Projekt sprechen!

Weitere Projekte

Website für Physiotherapie-Praxis

refraktiv.com – Augen lasern • Linsenimplantation

body{--wp--preset--color--black:#000;--wp--preset--color--cyan-bluish-gray:#abb8c3;--wp--preset--color--white:#fff;--wp--preset--color--pale-pink:#f78da7;--wp--preset--color--vivid-red:#cf2e2e;--wp--preset--color--luminous-vivid-orange:#ff6900;--wp--preset--color--luminous-vivid-amber:#fcb900;--wp--preset--color--light-green-cyan:#7bdcb5;--wp--preset--color--vivid-green-cyan:#00d084;--wp--preset--color--pale-cyan-blue:#8ed1fc;--wp--preset--color--vivid-cyan-blue:#0693e3;--wp--preset--color--vivid-purple:#9b51e0;--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple:linear-gradient(135deg,rgba(6,147,227,1) 0%,#9b51e0 100%);--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan:linear-gradient(135deg,#7adcb4 0%,#00d082 100%);--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange:linear-gradient(135deg,rgba(252,185,0,1) 0%,rgba(255,105,0,1) 100%);--wp--preset--gradient--luminous-vivid-orange-to-vivid-red:linear-gradient(135deg,rgba(255,105,0,1) 0%,#cf2e2e 100%);--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray:linear-gradient(135deg,#eee 0%,#a9b8c3 100%);--wp--preset--gradient--cool-to-warm-spectrum:linear-gradient(135deg,#4aeadc 0%,#9778d1 20%,#cf2aba 40%,#ee2c82 60%,#fb6962 80%,#fef84c 100%);--wp--preset--gradient--blush-light-purple:linear-gradient(135deg,#ffceec 0%,#9896f0 100%);--wp--preset--gradient--blush-bordeaux:linear-gradient(135deg,#fecda5 0%,#fe2d2d 50%,#6b003e 100%);--wp--preset--gradient--luminous-dusk:linear-gradient(135deg,#ffcb70 0%,#c751c0 50%,#4158d0 100%);--wp--preset--gradient--pale-ocean:linear-gradient(135deg,#fff5cb 0%,#b6e3d4 50%,#33a7b5 100%);--wp--preset--gradient--electric-grass:linear-gradient(135deg,#caf880 0%,#71ce7e 100%);--wp--preset--gradient--midnight:linear-gradient(135deg,#020381 0%,#2874fc 100%);--wp--preset--duotone--dark-grayscale:url("#wp-duotone-dark-grayscale");--wp--preset--duotone--grayscale:url("#wp-duotone-grayscale");--wp--preset--duotone--purple-yellow:url("#wp-duotone-purple-yellow");--wp--preset--duotone--blue-red:url("#wp-duotone-blue-red");--wp--preset--duotone--midnight:url("#wp-duotone-midnight");--wp--preset--duotone--magenta-yellow:url("#wp-duotone-magenta-yellow");--wp--preset--duotone--purple-green:url("#wp-duotone-purple-green");--wp--preset--duotone--blue-orange:url("#wp-duotone-blue-orange");--wp--preset--font-size--small:13px;--wp--preset--font-size--medium:20px;--wp--preset--font-size--large:36px;--wp--preset--font-size--x-large:42px;--wp--preset--spacing--20:.44rem;--wp--preset--spacing--30:.67rem;--wp--preset--spacing--40:1rem;--wp--preset--spacing--50:1.5rem;--wp--preset--spacing--60:2.25rem;--wp--preset--spacing--70:3.38rem;--wp--preset--spacing--80:5.06rem;}:where(.is-layout-flex){gap:.5em;}body .is-layout-flow > .alignleft{float:left;margin-inline-start:0;margin-inline-end:2em;}body .is-layout-flow > .alignright{float:right;margin-inline-start:2em;margin-inline-end:0;}body .is-layout-flow > .aligncenter{margin-left:auto !important;margin-right:auto !important;}body .is-layout-constrained > .alignleft{float:left;margin-inline-start:0;margin-inline-end:2em;}body .is-layout-constrained > .alignright{float:right;margin-inline-start:2em;margin-inline-end:0;}body .is-layout-constrained > .aligncenter{margin-left:auto !important;margin-right:auto !important;}body .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){max-width:var(--wp--style--global--content-size);margin-left:auto !important;margin-right:auto !important;}body .is-layout-constrained > .alignwide{max-width:var(--wp--style--global--wide-size);}body .is-layout-flex{display:flex;}body .is-layout-flex{flex-wrap:wrap;align-items:center;}body .is-layout-flex > *{margin:0;}:where(.wp-block-columns.is-layout-flex){gap:2em;}.has-black-color{color:var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-color{color:var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-color{color:var(--wp--preset--color--white) !important;}.has-pale-pink-color{color:var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-color{color:var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-color{color:var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-color{color:var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-color{color:var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-color{color:var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-color{color:var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-color{color:var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-color{color:var(--wp--preset--color--vivid-purple) !important;}.has-black-background-color{background-color:var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-background-color{background-color:var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-background-color{background-color:var(--wp--preset--color--white) !important;}.has-pale-pink-background-color{background-color:var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-background-color{background-color:var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-background-color{background-color:var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-background-color{background-color:var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-background-color{background-color:var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-background-color{background-color:var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-background-color{background-color:var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-background-color{background-color:var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-background-color{background-color:var(--wp--preset--color--vivid-purple) !important;}.has-black-border-color{border-color:var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-border-color{border-color:var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-border-color{border-color:var(--wp--preset--color--white) !important;}.has-pale-pink-border-color{border-color:var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-border-color{border-color:var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-border-color{border-color:var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-border-color{border-color:var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-border-color{border-color:var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-border-color{border-color:var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-border-color{border-color:var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-border-color{border-color:var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-border-color{border-color:var(--wp--preset--color--vivid-purple) !important;}.has-vivid-cyan-blue-to-vivid-purple-gradient-background{background:var(--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple) !important;}.has-light-green-cyan-to-vivid-green-cyan-gradient-background{background:var(--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan) !important;}.has-luminous-vivid-amber-to-luminous-vivid-orange-gradient-background{background:var(--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange) !important;}.has-luminous-vivid-orange-to-vivid-red-gradient-background{background:var(--wp--preset--gradient--luminous-vivid-orange-to-vivid-red) !important;}.has-very-light-gray-to-cyan-bluish-gray-gradient-background{background:var(--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray) !important;}.has-cool-to-warm-spectrum-gradient-background{background:var(--wp--preset--gradient--cool-to-warm-spectrum) !important;}.has-blush-light-purple-gradient-background{background:var(--wp--preset--gradient--blush-light-purple) !important;}.has-blush-bordeaux-gradient-background{background:var(--wp--preset--gradient--blush-bordeaux) !important;}.has-luminous-dusk-gradient-background{background:var(--wp--preset--gradient--luminous-dusk) !important;}.has-pale-ocean-gradient-background{background:var(--wp--preset--gradient--pale-ocean) !important;}.has-electric-grass-gradient-background{background:var(--wp--preset--gradient--electric-grass) !important;}.has-midnight-gradient-background{background:var(--wp--preset--gradient--midnight) !important;}.has-small-font-size{font-size:var(--wp--preset--font-size--small) !important;}.has-medium-font-size{font-size:var(--wp--preset--font-size--medium) !important;}.has-large-font-size{font-size:var(--wp--preset--font-size--large) !important;}.has-x-large-font-size{font-size:var(--wp--preset--font-size--x-large) !important;}.wp-block-navigation a:where(:not(.wp-element-button)){color:inherit;}:where(.wp-block-columns.is-layout-flex){gap:2em;}.wp-block-pullquote{font-size:1.5em;line-height:1.6;}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:#818a91;color:#fff;}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap{color:#818a91;border:3px solid;background-color:transparent;}.elementor-widget-text-editor:not(.elementor-drop-cap-view-default) .elementor-drop-cap{margin-top:8px;}.elementor-widget-text-editor:not(.elementor-drop-cap-view-default) .elementor-drop-cap-letter{width:1em;height:1em;}.elementor-widget-text-editor .elementor-drop-cap{float:left;text-align:center;line-height:1;font-size:50px;}.elementor-widget-text-editor .elementor-drop-cap-letter{display:inline-block;}.elementor-widget-image{text-align:center;}.elementor-widget-image a{display:inline-block;}.elementor-widget-image a img[src$=".svg"]{width:48px;}.elementor-widget-image img{vertical-align:middle;display:inline-block;}.elementor-heading-title{padding:0;margin:0;line-height:1;}.elementor-widget-heading .elementor-heading-title[class*=elementor-size-]>a{color:inherit;font-size:inherit;line-height:inherit;}.elementor-widget-heading .elementor-heading-title.elementor-size-small{font-size:15px;}.elementor-widget-heading .elementor-heading-title.elementor-size-medium{font-size:19px;}.elementor-widget-heading .elementor-heading-title.elementor-size-large{font-size:29px;}.elementor-widget-heading .elementor-heading-title.elementor-size-xl{font-size:39px;}.elementor-widget-heading .elementor-heading-title.elementor-size-xxl{font-size:59px;}.elementor-widget-social-icons.elementor-grid-0 .elementor-widget-container,.elementor-widget-social-icons.elementor-grid-mobile-0 .elementor-widget-container,.elementor-widget-social-icons.elementor-grid-tablet-0 .elementor-widget-container{line-height:1;font-size:0;}.elementor-widget-social-icons:not(.elementor-grid-0):not(.elementor-grid-tablet-0):not(.elementor-grid-mobile-0) .elementor-grid{display:inline-grid;}.elementor-widget-social-icons .elementor-grid{grid-column-gap:var(--grid-column-gap,5px);grid-row-gap:var(--grid-row-gap,5px);grid-template-columns:var(--grid-template-columns);justify-content:var(--justify-content,center);justify-items:var(--justify-content,center);}.elementor-icon.elementor-social-icon{font-size:var(--icon-size,25px);line-height:var(--icon-size,25px);width:calc(var(--icon-size,25px) + ( 2 * var(--icon-padding,.5em) ));height:calc(var(--icon-size,25px) + ( 2 * var(--icon-padding,.5em) ));}.elementor-social-icon{--e-social-icon-icon-color:#fff;display:inline-flex;background-color:#818a91;align-items:center;justify-content:center;text-align:center;cursor:pointer;}.elementor-social-icon i{color:var(--e-social-icon-icon-color);}.elementor-social-icon svg{fill:var(--e-social-icon-icon-color);}.elementor-social-icon:last-child{margin:0;}.elementor-social-icon:hover{opacity:.9;color:#fff;}.elementor-social-icon-android{background-color:#a4c639;}.elementor-social-icon-apple{background-color:#999;}.elementor-social-icon-behance{background-color:#1769ff;}.elementor-social-icon-bitbucket{background-color:#205081;}.elementor-social-icon-codepen{background-color:#000;}.elementor-social-icon-delicious{background-color:#39f;}.elementor-social-icon-deviantart{background-color:#05cc47;}.elementor-social-icon-digg{background-color:#005be2;}.elementor-social-icon-dribbble{background-color:#ea4c89;}.elementor-social-icon-elementor{background-color:#d30c5c;}.elementor-social-icon-envelope{background-color:#ea4335;}.elementor-social-icon-facebook,.elementor-social-icon-facebook-f{background-color:#3b5998;}.elementor-social-icon-flickr{background-color:#0063dc;}.elementor-social-icon-foursquare{background-color:#2d5be3;}.elementor-social-icon-free-code-camp,.elementor-social-icon-freecodecamp{background-color:#006400;}.elementor-social-icon-github{background-color:#333;}.elementor-social-icon-gitlab{background-color:#e24329;}.elementor-social-icon-globe{background-color:#818a91;}.elementor-social-icon-google-plus,.elementor-social-icon-google-plus-g{background-color:#dd4b39;}.elementor-social-icon-houzz{background-color:#7ac142;}.elementor-social-icon-instagram{background-color:#262626;}.elementor-social-icon-jsfiddle{background-color:#487aa2;}.elementor-social-icon-link{background-color:#818a91;}.elementor-social-icon-linkedin,.elementor-social-icon-linkedin-in{background-color:#0077b5;}.elementor-social-icon-medium{background-color:#00ab6b;}.elementor-social-icon-meetup{background-color:#ec1c40;}.elementor-social-icon-mixcloud{background-color:#273a4b;}.elementor-social-icon-odnoklassniki{background-color:#f4731c;}.elementor-social-icon-pinterest{background-color:#bd081c;}.elementor-social-icon-product-hunt{background-color:#da552f;}.elementor-social-icon-reddit{background-color:#ff4500;}.elementor-social-icon-rss{background-color:#f26522;}.elementor-social-icon-shopping-cart{background-color:#4caf50;}.elementor-social-icon-skype{background-color:#00aff0;}.elementor-social-icon-slideshare{background-color:#0077b5;}.elementor-social-icon-snapchat{background-color:#fffc00;}.elementor-social-icon-soundcloud{background-color:#f80;}.elementor-social-icon-spotify{background-color:#2ebd59;}.elementor-social-icon-stack-overflow{background-color:#fe7a15;}.elementor-social-icon-steam{background-color:#00adee;}.elementor-social-icon-stumbleupon{background-color:#eb4924;}.elementor-social-icon-telegram{background-color:#2ca5e0;}.elementor-social-icon-thumb-tack{background-color:#1aa1d8;}.elementor-social-icon-tripadvisor{background-color:#589442;}.elementor-social-icon-tumblr{background-color:#35465c;}.elementor-social-icon-twitch{background-color:#6441a5;}.elementor-social-icon-twitter{background-color:#1da1f2;}.elementor-social-icon-viber{background-color:#665cac;}.elementor-social-icon-vimeo{background-color:#1ab7ea;}.elementor-social-icon-vk{background-color:#45668e;}.elementor-social-icon-weibo{background-color:#dd2430;}.elementor-social-icon-weixin{background-color:#31a918;}.elementor-social-icon-whatsapp{background-color:#25d366;}.elementor-social-icon-wordpress{background-color:#21759b;}.elementor-social-icon-xing{background-color:#026466;}.elementor-social-icon-yelp{background-color:#af0606;}.elementor-social-icon-youtube{background-color:#cd201f;}.elementor-social-icon-500px{background-color:#0099e5;}.elementor-shape-rounded .elementor-icon.elementor-social-icon{border-radius:10%;}.elementor-shape-circle .elementor-icon.elementor-social-icon{border-radius:50%;}.elementor-button.elementor-hidden,.elementor-hidden{display:none;}.e-form__step{width:100%;}.e-form__step:not(.elementor-hidden){display:flex;flex-wrap:wrap;}.e-form__buttons{flex-wrap:wrap;}.e-form__buttons,.e-form__buttons__wrapper{display:flex;}.e-form__indicators{display:flex;justify-content:space-between;align-items:center;flex-wrap:nowrap;font-size:13px;margin-bottom:var(--e-form-steps-indicators-spacing);}.e-form__indicators__indicator{display:flex;flex-direction:column;align-items:center;justify-content:center;flex-basis:0;padding:0 var(--e-form-steps-divider-gap);}.e-form__indicators__indicator__progress{width:100%;position:relative;background-color:var(--e-form-steps-indicator-progress-background-color);border-radius:var(--e-form-steps-indicator-progress-border-radius);overflow:hidden;}.e-form__indicators__indicator__progress__meter{width:var(--e-form-steps-indicator-progress-meter-width,0);height:var(--e-form-steps-indicator-progress-height);line-height:var(--e-form-steps-indicator-progress-height);padding-right:15px;border-radius:var(--e-form-steps-indicator-progress-border-radius);background-color:var(--e-form-steps-indicator-progress-color);color:var(--e-form-steps-indicator-progress-meter-color);text-align:right;transition:width .1s linear;}.e-form__indicators__indicator:first-child{padding-left:0;}.e-form__indicators__indicator:last-child{padding-right:0;}.e-form__indicators__indicator--state-inactive{color:var(--e-form-steps-indicator-inactive-primary-color,#c2cbd2);}.e-form__indicators__indicator--state-inactive [class*=indicator--shape-]:not(.e-form__indicators__indicator--shape-none){background-color:var(--e-form-steps-indicator-inactive-secondary-color,#fff);}.e-form__indicators__indicator--state-inactive object,.e-form__indicators__indicator--state-inactive svg{fill:var(--e-form-steps-indicator-inactive-primary-color,#c2cbd2);}.e-form__indicators__indicator--state-active{color:var(--e-form-steps-indicator-active-primary-color,#39b54a);border-color:var(--e-form-steps-indicator-active-secondary-color,#fff);}.e-form__indicators__indicator--state-active [class*=indicator--shape-]:not(.e-form__indicators__indicator--shape-none){background-color:var(--e-form-steps-indicator-active-secondary-color,#fff);}.e-form__indicators__indicator--state-active object,.e-form__indicators__indicator--state-active svg{fill:var(--e-form-steps-indicator-active-primary-color,#39b54a);}.e-form__indicators__indicator--state-completed{color:var(--e-form-steps-indicator-completed-secondary-color,#fff);}.e-form__indicators__indicator--state-completed [class*=indicator--shape-]:not(.e-form__indicators__indicator--shape-none){background-color:var(--e-form-steps-indicator-completed-primary-color,#39b54a);}.e-form__indicators__indicator--state-completed .e-form__indicators__indicator__label{color:var(--e-form-steps-indicator-completed-primary-color,#39b54a);}.e-form__indicators__indicator--state-completed .e-form__indicators__indicator--shape-none{color:var(--e-form-steps-indicator-completed-primary-color,#39b54a);background-color:initial;}.e-form__indicators__indicator--state-completed object,.e-form__indicators__indicator--state-completed svg{fill:var(--e-form-steps-indicator-completed-secondary-color,#fff);}.e-form__indicators__indicator__icon{width:var(--e-form-steps-indicator-padding,30px);height:var(--e-form-steps-indicator-padding,30px);font-size:var(--e-form-steps-indicator-icon-size);border-width:1px;border-style:solid;display:flex;justify-content:center;align-items:center;overflow:hidden;margin-bottom:10px;}.e-form__indicators__indicator__icon img,.e-form__indicators__indicator__icon object,.e-form__indicators__indicator__icon svg{width:var(--e-form-steps-indicator-icon-size);height:auto;}.e-form__indicators__indicator__icon .e-font-icon-svg{height:1em;}.e-form__indicators__indicator__number{width:var(--e-form-steps-indicator-padding,30px);height:var(--e-form-steps-indicator-padding,30px);border-width:1px;border-style:solid;display:flex;justify-content:center;align-items:center;margin-bottom:10px;}.e-form__indicators__indicator--shape-circle{border-radius:50%;}.e-form__indicators__indicator--shape-square{border-radius:0;}.e-form__indicators__indicator--shape-rounded{border-radius:5px;}.e-form__indicators__indicator--shape-none{border:0;}.e-form__indicators__indicator__label{text-align:center;}.e-form__indicators__indicator__separator{width:100%;height:var(--e-form-steps-divider-width);background-color:#c2cbd2;}.e-form__indicators--type-icon,.e-form__indicators--type-icon_text,.e-form__indicators--type-number,.e-form__indicators--type-number_text{align-items:flex-start;}.e-form__indicators--type-icon .e-form__indicators__indicator__separator,.e-form__indicators--type-icon_text .e-form__indicators__indicator__separator,.e-form__indicators--type-number .e-form__indicators__indicator__separator,.e-form__indicators--type-number_text .e-form__indicators__indicator__separator{margin-top:calc(var(--e-form-steps-indicator-padding,30px) / 2 - var(--e-form-steps-divider-width,1px) / 2);}.elementor-field-type-hidden{display:none;}.elementor-field-type-html{display:inline-block;}.elementor-login .elementor-lost-password,.elementor-login .elementor-remember-me{font-size:.85em;}.elementor-field-type-recaptcha_v3 .elementor-field-label{display:none;}.elementor-field-type-recaptcha_v3 .grecaptcha-badge{z-index:1;}.elementor-button .elementor-form-spinner{order:3;}.elementor-form .elementor-button>span{display:flex;justify-content:center;align-items:center;}.elementor-form .elementor-button .elementor-button-text{white-space:normal;flex-grow:0;}.elementor-form .elementor-button svg{height:auto;}.elementor-form .elementor-button .e-font-icon-svg{height:1em;}.elementor-select-wrapper .select-caret-down-wrapper{position:absolute;top:50%;transform:translateY(-50%);inset-inline-end:10px;pointer-events:none;font-size:11px;}.elementor-select-wrapper .select-caret-down-wrapper svg{display:unset;width:1em;aspect-ratio:unset;fill:currentColor;}.elementor-select-wrapper .select-caret-down-wrapper i{font-size:19px;line-height:2;}.elementor-select-wrapper.remove-before:before{content:"" !important;}