doing what you love is not working?
In that case, we’re guilty as charged. We’ve been having way too much fun transforming ideas to reality.
This is us ⠀Edgy designs, killer functionality, and enough attitude to make your grandmother blush. We are a design agency where creativity has no limits, and shyness has no space. No one can set rules for imagination. We don’t. Our work is a reflection of it. Together, we’ll write a success story so epic, even Shakespeare would have wished he’d thought of it first!
WHAT WE DID
KUNST PARTY
.marquee-work-KP {
white-space: nowrap;
overflow: hidden;
position: relative;
font-size: 360px;
text-transform: uppercase;
font-family: 'humane' !important;
color: #f7eee5;
letter-spacing: -1px;
line-height: 0em;
width: 100%;
box-sizing: border-box;
display: flex;
align-items: center;
padding: 0;
margin: 0;
height: 1.5em;
}
.marquee-work-KP-wrapper {
display: inline-block;
white-space: nowrap;
will-change: transform;
}
.marquee-work-KP-content {
display: inline-block;
}
@media (max-width: 768px) {
.marquee-work-KP {
font-size: 200px;
letter-spacing: 0px;
font-family: 'humane'!important;
}
}
@media (max-width: 480px) {
.marquee-work-KP {
font-size: 120px;
letter-spacing: 0px;
font-family: 'humane' !important;
}
}
document.addEventListener("DOMContentLoaded", function() {
const wrapper = document.getElementById('marquee-work-KP-wrapper');
const content = document.getElementById('marquee-work-KP-content');
let lastScrollY = window.scrollY;
let speed = 1;
let position = 0;
let backRollEffect = 0;
// Duplicate content to ensure continuous scroll
wrapper.innerHTML = content.innerHTML.repeat(4);
function animate() {
const currentScrollY = window.scrollY;
const scrollDelta = currentScrollY - lastScrollY;
lastScrollY = currentScrollY;
// Adjust speed based on scroll
if (scrollDelta > 0) {
speed = Math.min(speed + 0.1, 2); // Increase speed, max 5
backRollEffect = 0; // Reset back-roll effect
} else if (scrollDelta < 0) {
speed = Math.max(speed - 0.2, 1); // Decrease speed, min 0.2
backRollEffect = Math.min(backRollEffect + 0.5, 2); // Increase back-roll effect
} else {
speed = Math.max(speed - 0.1, 1); // Gradually return to normal speed
backRollEffect = Math.max(backRollEffect - 0.1, 0); // Decrease back-roll effect
}
position += speed - backRollEffect;
const wrapperWidth = wrapper.offsetWidth / 4;
if (position >= wrapperWidth) {
position = position % wrapperWidth;
}
if (position < 0) {
position = wrapperWidth + position;
}
wrapper.style.transform = `translateX(${-position}px)`;
requestAnimationFrame(animate);
}
animate();
});
CREATIVE BRANDING LOGO WEB SITE CONTENT
CBD EVOLUTION
.marquee-work-CBD {
white-space: nowrap;
overflow: hidden;
position: relative;
font-size: 360px;
text-transform: uppercase;
font-family: 'humane' !important;
color: #f7eee5;
letter-spacing: -1px;
line-height: 0em;
width: 100%;
box-sizing: border-box;
display: flex;
align-items: center;
padding: 0;
margin: 0;
height: 1.5em;
}
.marquee-work-CBD-wrapper {
display: inline-block;
white-space: nowrap;
will-change: transform;
}
.marquee-work-CBD-content {
display: inline-block;
}
@media (max-width: 768px) {
.marquee-work-CBD {
font-size: 200px;
letter-spacing: 0px;
font-family: 'humane'!important;
}
}
@media (max-width: 480px) {
.marquee-work-CBD {
font-size: 120px;
letter-spacing: 0px;
font-family: 'humane' !important;
}
}
document.addEventListener("DOMContentLoaded", function() {
const wrapper = document.getElementById('marquee-work-CBD-wrapper');
const content = document.getElementById('marquee-work-CBD-content');
let lastScrollY = window.scrollY;
let speed = 1;
let position = 0;
let backRollEffect = 0;
// Duplicate content to ensure continuous scroll
wrapper.innerHTML = content.innerHTML.repeat(4);
function animate() {
const currentScrollY = window.scrollY;
const scrollDelta = currentScrollY - lastScrollY;
lastScrollY = currentScrollY;
// Adjust speed based on scroll
if (scrollDelta > 0) {
speed = Math.min(speed + 0.1, 2); // Increase speed, max 5
backRollEffect = 0; // Reset back-roll effect
} else if (scrollDelta < 0) {
speed = Math.max(speed - 0.2, 1); // Decrease speed, min 0.2
backRollEffect = Math.min(backRollEffect + 0.5, 2); // Increase back-roll effect
} else {
speed = Math.max(speed - 0.1, 1); // Gradually return to normal speed
backRollEffect = Math.max(backRollEffect - 0.1, 0); // Decrease back-roll effect
}
position += speed - backRollEffect;
const wrapperWidth = wrapper.offsetWidth / 4;
if (position >= wrapperWidth) {
position = position % wrapperWidth;
}
if (position < 0) {
position = wrapperWidth + position;
}
wrapper.style.transform = `translateX(${-position}px)`;
requestAnimationFrame(animate);
}
animate();
});
CREATIVE BRANDING LOGO WEB SITE PACKAGE DESIGN
TILIA SANA
.marquee-work-TILIA {
white-space: nowrap;
overflow: hidden;
position: relative;
font-size: 360px;
text-transform: uppercase;
font-family: 'humane' !important;
color: #f7eee5;
letter-spacing: -1px;
line-height: 0em;
width: 100%;
box-sizing: border-box;
display: flex;
align-items: center;
padding: 0;
margin: 0;
height: 1.5em;
}
.marquee-work-TILIA-wrapper {
display: inline-block;
white-space: nowrap;
will-change: transform;
}
.marquee-work-TILIA-content {
display: inline-block;
}
@media (max-width: 768px) {
.marquee-work-TILIA {
font-size: 200px;
letter-spacing: 0px;
font-family: 'humane'!important;
}
}
@media (max-width: 480px) {
.marquee-work-TILIA {
font-size: 120px;
letter-spacing: 0px;
font-family: 'humane' !important;
}
}
document.addEventListener("DOMContentLoaded", function() {
const wrapper = document.getElementById('marquee-work-TILIA-wrapper');
const content = document.getElementById('marquee-work-TILIA-content');
let lastScrollY = window.scrollY;
let speed = 1;
let position = 0;
let backRollEffect = 0;
// Duplicate content to ensure continuous scroll
wrapper.innerHTML = content.innerHTML.repeat(4);
function animate() {
const currentScrollY = window.scrollY;
const scrollDelta = currentScrollY - lastScrollY;
lastScrollY = currentScrollY;
// Adjust speed based on scroll
if (scrollDelta > 0) {
speed = Math.min(speed + 0.1, 2); // Increase speed, max 5
backRollEffect = 0; // Reset back-roll effect
} else if (scrollDelta < 0) {
speed = Math.max(speed - 0.2, 1); // Decrease speed, min 0.2
backRollEffect = Math.min(backRollEffect + 0.5, 2); // Increase back-roll effect
} else {
speed = Math.max(speed - 0.1, 1); // Gradually return to normal speed
backRollEffect = Math.max(backRollEffect - 0.1, 0); // Decrease back-roll effect
}
position += speed - backRollEffect;
const wrapperWidth = wrapper.offsetWidth / 4;
if (position >= wrapperWidth) {
position = position % wrapperWidth;
}
if (position < 0) {
position = wrapperWidth + position;
}
wrapper.style.transform = `translateX(${-position}px)`;
requestAnimationFrame(animate);
}
animate();
});
CREATIVE BRANDING LOGO WEB SITE
JJ TENNIS
.marquee-work-JJ {
white-space: nowrap;
overflow: hidden;
position: relative;
font-size: 360px;
text-transform: uppercase;
font-family: 'humane' !important;
color: #f7eee5;
letter-spacing: -1px;
line-height: 0em;
width: 100%;
box-sizing: border-box;
display: flex;
align-items: center;
padding: 0;
margin: 0;
height: 1.5em;
}
.marquee-work-JJ-wrapper {
display: inline-block;
white-space: nowrap;
will-change: transform;
}
.marquee-work-JJ-content {
display: inline-block;
}
@media (max-width: 768px) {
.marquee-work-JJ {
font-size: 200px;
letter-spacing: 0px;
font-family: 'humane'!important;
}
}
@media (max-width: 480px) {
.marquee-work-JJ {
font-size: 120px;
letter-spacing: 0px;
font-family: 'humane' !important;
}
}
document.addEventListener("DOMContentLoaded", function() {
const wrapper = document.getElementById('marquee-work-JJ-wrapper');
const content = document.getElementById('marquee-work-JJ-content');
let lastScrollY = window.scrollY;
let speed = 1;
let position = 0;
let backRollEffect = 0;
// Duplicate content to ensure continuous scroll
wrapper.innerHTML = content.innerHTML.repeat(4);
function animate() {
const currentScrollY = window.scrollY;
const scrollDelta = currentScrollY - lastScrollY;
lastScrollY = currentScrollY;
// Adjust speed based on scroll
if (scrollDelta > 0) {
speed = Math.min(speed + 0.1, 2); // Increase speed, max 5
backRollEffect = 0; // Reset back-roll effect
} else if (scrollDelta < 0) {
speed = Math.max(speed - 0.2, 1); // Decrease speed, min 0.2
backRollEffect = Math.min(backRollEffect + 0.5, 2); // Increase back-roll effect
} else {
speed = Math.max(speed - 0.1, 1); // Gradually return to normal speed
backRollEffect = Math.max(backRollEffect - 0.1, 0); // Decrease back-roll effect
}
position += speed - backRollEffect;
const wrapperWidth = wrapper.offsetWidth / 4;
if (position >= wrapperWidth) {
position = position % wrapperWidth;
}
if (position < 0) {
position = wrapperWidth + position;
}
wrapper.style.transform = `translateX(${-position}px)`;
requestAnimationFrame(animate);
}
animate();
});
BRANDING LOGO WEB SITE
CONTACT
Don’t be shy, just say hi:
classick design
Email:
hi@classick.design
Phone:
+41 77 429 10 58
MENU:
Home
About us
Services
Jobs
Blog (Long read coming soon!)
Contact
WHAT WE DO:
Web design
Branding
Content
AI
.marquee-footer {
white-space: nowrap;
overflow: hidden;
position: relative;
font-size: 360px;
text-transform: uppercase;
font-family: 'humane' !important;
color: #101010;
letter-spacing: -1px;
line-height: 0em;
width: 100%;
box-sizing: border-box;
display: flex;
align-items: center;
padding: 0;
margin: 0;
height: 1em;
}
.marquee-footer-wrapper {
display: inline-block;
white-space: nowrap;
will-change: transform;
}
.marquee-footer-content {
display: inline-block;
}
@media (max-width: 768px) {
.marquee-footer {
font-size: 200px;
letter-spacing: 0px;
font-family: 'humane'!important;
}
}
@media (max-width: 480px) {
.marquee-footer {
font-size: 120px;
letter-spacing: 0px;
font-family: 'humane' !important;
}
}
document.addEventListener("DOMContentLoaded", function() {
const wrapper = document.getElementById('marquee-footer-wrapper');
const content = document.getElementById('marquee-footer-content');
let lastScrollY = window.scrollY;
let speed = 1;
let position = 0;
let backRollEffect = 0;
// Duplicate content to ensure continuous scroll
wrapper.innerHTML = content.innerHTML.repeat(4);
function animate() {
const currentScrollY = window.scrollY;
const scrollDelta = currentScrollY - lastScrollY;
lastScrollY = currentScrollY;
// Adjust speed based on scroll
if (scrollDelta > 0) {
speed = Math.min(speed + 0.1, 2); // Increase speed, max 5
backRollEffect = 0; // Reset back-roll effect
} else if (scrollDelta < 0) {
speed = Math.max(speed - 0.2, 1); // Decrease speed, min 0.2
backRollEffect = Math.min(backRollEffect + 0.5, 2); // Increase back-roll effect
} else {
speed = Math.max(speed - 0.1, 1); // Gradually return to normal speed
backRollEffect = Math.max(backRollEffect - 0.1, 0); // Decrease back-roll effect
}
position += speed - backRollEffect;
const wrapperWidth = wrapper.offsetWidth / 4;
if (position >= wrapperWidth) {
position = position % wrapperWidth;
}
if (position < 0) {
position = wrapperWidth + position;
}
wrapper.style.transform = `translateX(${-position}px)`;
requestAnimationFrame(animate);
}
animate();
});
classick design
hi@classick.design
Phone
+41 77 429 10 58
Menu
Home
About
Services
Jobs
Blog (long read coming soon)
Contact
What we do
Web design
Branding
Content
AI
All rights reserved 2024 © Classick Design