ZenBrowserMirrors/www
1
0
Fork 0
mirror of https://github.com/zen-browser/www.git synced 2025-07-08 09:20:00 +02:00
Code Issues Projects Releases Packages Wiki Activity

Agregar animación de zoom y aplicar animaciones en la sección de características

Browse source
This commit is contained in:
mr. m 🤙 2024-12-13 10:20:34 +00:00
parent cec8f93516
commit 641d8d6ef3
3 changed files with 25 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

7
src/animations.ts
View file

@ -5,3 +5,10 @@ export function getTitleAnimation(delay = 0) {
whileInView: { opacity: 1, translateY: 0, filter: 'blur(0px)', transition: { duration: 0.3, delay } }, whileInView: { opacity: 1, translateY: 0, filter: 'blur(0px)', transition: { duration: 0.3, delay } },
}; };
} }
export function getZoomInAnimation(delay = 0) {
return {
initial: { scale: 0.8, opacity: 0 },
whileInView: { scale: 1, opacity: 1, transition: { duration: 0.2, delay } },
};
}

4
src/components/Community.astro
View file

@ -7,9 +7,7 @@ import {
Github, Github,
Check, Check,
} from 'lucide-astro' } from 'lucide-astro'
import { getTitleAnimation } from '../animations' import { getTitleAnimation } from '../animations'
--- ---
<section <section

28
src/components/Features.astro
View file

@ -9,6 +9,10 @@ import browserSplitViews from '../assets/browser-splitview.png';
import browserSidebar from '../assets/browser-sidebar.png'; import browserSidebar from '../assets/browser-sidebar.png';
import browserGlance from '../assets/browser-glance.webm'; import browserGlance from '../assets/browser-glance.webm';
import { motion } from 'motion/react';
import { getTitleAnimation, getZoomInAnimation } from '../animations'
--- ---
<section <section
@ -17,8 +21,10 @@ import browserGlance from '../assets/browser-glance.webm';
> >
<div class="flex flex-col lg:flex-row w-full items-start gap-12"> <div class="flex flex-col lg:flex-row w-full items-start gap-12">
<div id="feature-list" class="lg:w-1/3 flex flex-col gap-4"> <div id="feature-list" class="lg:w-1/3 flex flex-col gap-4">
<Title>Features</Title> <motion.span client:load viewport={{ once: true }} {...getTitleAnimation(0.2)}>
<div class="feature flex hover:bg-coral/5 rounded-xl p-4 w-full cursor-pointer"> <Title>Features</Title>
</motion.span>
<motion.div client:load viewport={{ once: true }} {...getZoomInAnimation(0.4)} className="feature flex hover:bg-coral/5 rounded-xl p-4 w-full cursor-pointer">
<div class="flex flex-col"> <div class="flex flex-col">
<Description class="feature-title font-bold text-2xl"> <Description class="feature-title font-bold text-2xl">
Workspaces Workspaces
@ -27,8 +33,8 @@ import browserGlance from '../assets/browser-glance.webm';
With Zen, you can create multiple workspaces to keep your tabs organized. With Zen, you can create multiple workspaces to keep your tabs organized.
</p> </p>
</div> </div>
</div> </motion.div>
<div class="feature flex hover:bg-coral/5 rounded-xl p-4 w-full cursor-pointer"> <motion.div client:load viewport={{ once: true }} {...getZoomInAnimation(0.6)} className="feature flex hover:bg-coral/5 rounded-xl p-4 w-full cursor-pointer">
<div class="flex flex-col"> <div class="flex flex-col">
<Description class="feature-title font-bold text-2xl"> <Description class="feature-title font-bold text-2xl">
Compact Mode Compact Mode
@ -37,8 +43,8 @@ import browserGlance from '../assets/browser-glance.webm';
Zen's compact mode allows you to see more of your content at once. Zen's compact mode allows you to see more of your content at once.
</p> </p>
</div> </div>
</div> </motion.div>
<div class="feature flex hover:bg-coral/5 rounded-xl p-4 w-full cursor-pointer"> <motion.div client:load viewport={{ once: true }} {...getZoomInAnimation(0.8)} className="feature flex hover:bg-coral/5 rounded-xl p-4 w-full cursor-pointer">
<div class="flex flex-col"> <div class="flex flex-col">
<Description class="feature-title font-bold text-2xl"> <Description class="feature-title font-bold text-2xl">
Split Views Split Views
@ -47,8 +53,8 @@ import browserGlance from '../assets/browser-glance.webm';
Split your browser into multiple views to see more content at once. Split your browser into multiple views to see more content at once.
</p> </p>
</div> </div>
</div> </motion.div>
<div class="feature flex hover:bg-coral/5 rounded-xl p-4 w-full cursor-pointer"> <motion.div client:load viewport={{ once: true }} {...getZoomInAnimation(1)} className="feature flex hover:bg-coral/5 rounded-xl p-4 w-full cursor-pointer">
<div class="flex flex-col"> <div class="flex flex-col">
<Description class="feature-title font-bold text-2xl"> <Description class="feature-title font-bold text-2xl">
Sidebar Sidebar
@ -57,8 +63,8 @@ import browserGlance from '../assets/browser-glance.webm';
Zen's sidebar allows you to quickly access your favourite websites. Zen's sidebar allows you to quickly access your favourite websites.
</p> </p>
</div> </div>
</div> </motion.div>
<div class="feature flex hover:bg-coral/5 rounded-xl p-4 w-full cursor-pointer"> <motion.div client:load viewport={{ once: true }} {...getZoomInAnimation(1.2)} className="feature flex hover:bg-coral/5 rounded-xl p-4 w-full cursor-pointer">
<div class="flex flex-col"> <div class="flex flex-col">
<Description class="feature-title font-bold text-2xl"> <Description class="feature-title font-bold text-2xl">
Zen Glance Zen Glance
@ -67,7 +73,7 @@ import browserGlance from '../assets/browser-glance.webm';
Preview your tabs with Zen Glance to quickly find what you're looking for, without switching tabs. Preview your tabs with Zen Glance to quickly find what you're looking for, without switching tabs.
</p> </p>
</div> </div>
</div> </motion.div>
</div> </div>
<div class="relative lg:w-2/3 lg:pl-20 items-center m-auto"> <div class="relative lg:w-2/3 lg:pl-20 items-center m-auto">
<div class="ml-auto" id="feature-list-image"> <div class="ml-auto" id="feature-list-image">