آخرین مطالب
ورژن دوم افکت هولوگرافیک و شب رنگ برای کارت ها Pokemon Card Holo Effect v2
مطالب پربازدید
دکمه با خط حاشیه گردنیت رنگی و متحرک Button Border Animation
۴۴
... Loading
![Post Pic]()
... Loading
این کد یک نوع دراپ داون تعاملی ایجاد میکند که به کاربران اجازه می‌دهد گزینه های مختلف را از لیست انتخاب کنند. با استفاده از جاوا اسکریپت میتوانید گزینه های "Minimalist"، "Vintage"، "Modern" و ... را انتخاب کنید. پنل کنترل بالای صفحه امکان تنظیم سرعت انیمیشن، رنگ برجسته، پرسپکتیو و زاویه چرخش را فراهم میکند. این تنظیمات به صورت بلادرنگ به تغییرات ورودی کاربر پاسخ می‌دهند. همچنین این کد از لایبرری Tweakpane و Popover Polyfill استفاده میکند. شماره کد: 6
منبع کدCSS
*,
*:after,
*:before {
box-sizing: border-box;
}
body {
display: grid;
place-items: center;
min-height: 100vh;
font-family: 'SF Pro Text', 'SF Pro Icons', 'AOS Icons', 'Helvetica Neue',
Helvetica, Arial, sans-serif, system-ui;
}
body::before {
--size: 60px;
--line: hsl(0 0% 0% / 0.15);
content: '';
height: 100vh;
width: 100vw;
position: fixed;
background: linear-gradient(
90deg,
var(--line) 1px,
transparent 1px var(--size)
)
50% 50% / var(--size) var(--size),
linear-gradient(var(--line) 1px, transparent 1px var(--size)) 50% 50% /
var(--size) var(--size);
mask: linear-gradient(-15deg, transparent 30%, white);
top: 0;
transform-style: flat;
pointer-events: none;
z-index: -1;
}
/* Anchor styles are managed inline inside the head */
#pop {
inset: unset;
/* display: block;*/
width: 180px;
border: 0;
padding: 0;
background: transparent;
transform-style: preserve-3d;
overflow: visible;
font-weight: 300;
}
body > [popovertarget] {
anchor-name: --trigger;
}
#pop {
left: anchor(--trigger left);
top: calc(anchor(--trigger bottom) + 0.5rem);
}
:root {
--speed: .5s;
--accent: hsl(30 80% 50%);
--ease: ease-out;
accent-color: var(--accent);
}
@supports(animation-timing-function: linear(1, 1)) {
:root {
--ease: linear(
0, 0.0012 14.95%, 0.0089 22.36%,
0.0297 28.43%, 0.0668 33.43%,
0.0979 36.08%, 0.1363 38.55%,
0.2373 43.07%, 0.3675 47.01%,
0.5984 52.15%, 0.7121 55.23%,
0.8192 59.21%, 0.898 63.62%,
0.9297 66.23%, 0.9546 69.06%,
0.9733 72.17%, 0.9864 75.67%,
0.9982 83.73%, 1
);
}
}
#pop.\:popover-open .popover__content ul {
animation: drop calc(var(--speed) * 1s) var(--ease);
}
#pop:popover-open .popover__content ul {
animation: drop calc(var(--speed) * 1s) var(--ease);
}
#pop.\:popover-open .popover__content::after,
#pop.\:popover-open .popover__content {
animation: open calc(var(--speed) * 1s) var(--ease);
}
#pop:popover-open .popover__content::after,
#pop:popover-open .popover__content {
animation: open calc(var(--speed) * 1s) var(--ease);
}
#pop.\:popover-open .popover__content::before {
animation: slam calc(var(--speed) * 1s) var(--ease) both;
}
#pop:popover-open .popover__content::before {
animation: slam calc(var(--speed) * 1s) var(--ease) both;
}
.popover__content::before {
--blur: 1rem;
content: '';
position: absolute;
inset: var(--blur) calc(var(--blur) * -1.15) calc(var(--blur) * -3)
calc(var(--blur) * -1.15);
background: hsl(0 0% 0% / 0.2);
clip-path: polygon(
0 0,
100% 0,
calc(100% + var(--blur)) calc(100% + var(--blur)),
calc(var(--blur) * -3) calc(100% + var(--blur))
);
z-index: -2;
transform-origin: 50% 0;
filter: blur(var(--blur));
border-radius: 1rem 1rem 6px 6px;
/* mask: linear-gradient(transparent, white);*/
}
.popover__content::after {
content: "";
z-index: -1;
background: hsl(0 0% 98%);
position: absolute;
inset: 0;
border-radius: 6px;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
0 2px 4px -2px rgba(0, 0, 0, 0.1);
}
@keyframes open {
0% {
opacity: 0;
}
}
@keyframes slam {
to {
opacity: 0;
inset: 0;
}
}
@keyframes drop {
0% {
rotate: x calc(var(--rotation, 30) * 1deg);
}
}
[popovertarget] {
font-size: 0.875rem;
display: flex;
gap: 0.25rem;
align-items: center;
padding: 0.5rem 0.75rem;
background: hsl(0 0% 98%);
border-radius: 6px;
border: 1px solid hsl(0 0% 60%);
outline-color: var(--accent);
width: 160px;
cursor: pointer;
color: hsl(0 0% 10%);
}
[popovertarget] svg {
width: 24px;
height: 1rem;
opacity: 0.5;
}
[popovertarget] span:first-of-type {
opacity: 0.5;
}
[popovertarget] span:last-of-type {
flex: 1;
text-align: left;
}
.popover__content {
position: relative;
transform-style: preserve-3d;
perspective: calc(var(--perspective, 500) * 1px);
max-height: 40vh;
}
.popover__content ul {
border: 1px solid hsl(0 0% 90%);
border-radius: 6px;
padding: 0.25rem;
background: hsl(0 0% 98%);
transform-origin: 50% 0;
margin: 0;
padding: 0;
list-style-type: none;
display: grid;
gap: 0.25rem;
transform-style: preserve-3d;
max-height: 40vh;
overflow: auto;
scrollbar-color: var(--accent) transparent;
scrollbar-width: thin;
}
.popover__content button {
width: 100%;
display: flex;
border: 0;
background: transparent;
padding: 0;
margin: 0;
font-weight: 300;
color: hsl(0 0% 10%);
cursor: pointer;
position: relative;
overflow: hidden;
padding: 0.5rem;
font-size: 0.875rem;
justify-content: space-between;
outline-color: transparent;
outline: none;
}
.popover__content button svg {
stroke: var(--accent);
stroke-width: 3;
display: none;
}
.popover__content button[data-selected=true] svg {
display: block;
}
.popover__content button:is(:hover, :focus-visible) {
--intent: 1;
}
.popover__content button::after {
content: '';
position: absolute;
inset: 0;
background: hsl(0 0% 80%/ 0.25);
opacity: var(--intent, 0);
}
/* Social */
.bear-link {
color: canvasText;
position: fixed;
top: 1rem;
left: 1rem;
width: 48px;
aspect-ratio: 1;
display: grid;
place-items: center;
opacity: 0.8;
}
:where(.x-link, .bear-link):is(:hover, :focus-visible) {
opacity: 1;
}
.bear-link svg {
width: 75%;
}
div.tp-dfwv {
width: 300px;
}JS
import { Pane } from 'https://cdn.skypack.dev/tweakpane';
import { apply, isSupported } from 'https://cdn.skypack.dev/@oddbird/popover-polyfill/fn';
if (!isSupported()) apply();
const label = document.querySelector('[popovertarget] span:last-of-type');
const pop = document.querySelector('#pop');
const selectOption = event => {
document.querySelector('[data-selected=true]').dataset.selected = false;
label.innerText = event.target.dataset.value;
event.target.dataset.selected = true;
};
const handleSelect = event => {
if (event.newState === 'open') pop.addEventListener('click', selectOption);else
pop.removeEventListener('click', selectOption);
};
pop.addEventListener('beforetoggle', handleSelect);
const CONFIG = {
speed: 0.5,
accent: '#e68019',
perspective: 500,
rotation: 30 };
const CTRL = new Pane({ title: 'Configuration', expanded: false });
CTRL.addBinding(CONFIG, 'speed', { min: 0.2, max: 4, step: 0.1, label: 'Speed (s)' });
CTRL.addBinding(CONFIG, 'accent', { label: 'Accent' });
CTRL.addBinding(CONFIG, 'perspective', { min: 100, max: 1000, step: 100, label: 'Perspective (px)' });
CTRL.addBinding(CONFIG, 'rotation', { min: 5, max: 45, step: 1, label: 'Rotation (deg)' });
const update = () => {
document.documentElement.style.setProperty('--speed', CONFIG.speed);
document.documentElement.style.setProperty('--accent', CONFIG.accent);
document.documentElement.style.setProperty('--perspective', CONFIG.perspective);
document.documentElement.style.setProperty('--rotation', CONFIG.rotation);
};
CTRL.on('change', update);
update();HTML
230
CSS
244
JS
33
Category: Menu Button Dropdown
Tags: Popdown Popover Polyfill Tweakpane jh3y@ دراپ داون ساخت منو زیبا
Author: newuiux
Date: شنبه, ۶ مرداد ۱۴۰۳
Number: 
لیست برخی تگ های این سایت: