Blank page

Поиск по сайту

<!DOCTYPE html>

<head>

<title>Stacked Scroll Accordion + Popups</title>

<style>

/* Подключаем TT Hoves Trial Semibold */

@font-face {

font-family: 'TT Hoves Trial';

src: local('TT Hoves Trial Semibold');

font-weight: 600;

font-style: normal;

}

:root {

--accent-color: #F44336;

--text-color: #111;

--border-color: #37373c;

--bg-color: #fff;

--header-bg: #37373c;

--hover-bg: #f5f5f5;

}

*, *::before, *::after {

margin: 0;

padding: 0;

box-sizing: border-box;

}

body {

overflow-x: hidden;

font-family: 'TT Hoves Trial', sans-serif;

font-weight: 600;

background: #EDEDED;

}

/* ====== Аккордеон ====== */

.accordion-wrapper {

position: sticky;

top: 0;

width: 100vw;

height: 100vh;

overflow: hidden;

background: var(--bg-color);

}

.accordion-header {

height: 25vh;

background: var(--header-bg);

display: flex;

align-items: center;

padding-left: 5vw;

}

.accordion-header h2 {

color: #fff;

font-size: 3em;

letter-spacing: .5em;

white-space: nowrap;

}

.accordion-container {

position: absolute;

top: 25vh;

left: 0;

width: 125vw;

height: 65vh;

}

.accordion-card {

position: absolute;

top: 0;

width: 30vw;

height: 100%;

background: var(--bg-color);

border-left: 1px solid var(--border-color);

border-bottom: 1px solid var(--border-color);

display: flex;

flex-direction: column;

padding: 2rem;

padding-bottom: calc(2rem + 5vh);

transition: background .2s;

cursor: pointer;

}

.accordion-card:hover { background: var(--hover-bg); }

.card-1 { left: 0; }

.card-2 { left: 30vw; }

.card-3 { left: 60vw; }

.card-4 { left: 80vw; }

.card-5 { left: 85vw; }

.card-6 { left: 90vw; }

.card-7 {

left: 95vw;

width: 70vw;

}

.card-title {

color: var(--accent-color);

font-size: 3em;

line-height: 1.1;

margin-bottom: 1rem;

}

.card-footer {

display: flex;

flex-direction: column;

align-items: flex-start;

margin-top: auto;

gap: 1rem;

}

.card-list {

list-style: none;

margin: 0;

padding: 0;

color: var(--text-color);

font-size: 1.2em;

line-height: 1.6;

}

.card-link {

display: flex;

align-items: center;

font-size: 1.2em;

color: var(--border-color);

font-weight: 600;

}

.card-link .arrow {

margin-right: .5em;

color: var(--accent-color);

font-size: 1.5em;

line-height: 1;

}

.scroll-spacer { /* высота задаётся в JS */ }

/* ====== Попапы ====== */

.popup-overlay {

position: fixed;

top: 0; left: 0;

width: 100vw; height: 100vh;

background: rgba(0,0,0,0.5);

opacity: 0;

visibility: hidden;

transition: opacity 0.3s ease;

z-index: 1000;

}

.popup-overlay.active {

opacity: 1;

visibility: visible;

}

.popup-panel {

position: fixed;

top: 0; right: 0;

width: 40vw; height: 100vh;

background: #f5f5f5;

transform: translateX(100%);

transition: transform 0.4s ease;

z-index: 1001;

padding: 2rem;

overflow-y: auto;

box-shadow: -4px 0 16px rgba(0,0,0,0.2);

}

.popup-panel.active {

transform: translateX(0);

}

.popup-close {

position: absolute;

top: 1rem; right: 1rem;

background: none;

border: none;

font-size: 2rem;

cursor: pointer;

}

.popup-title {

margin: 0 0 1rem;

font-size: 2.5rem;

color: var(--accent-color);

}

.popup-body {

font-size: 1.1rem;

line-height: 1.6;

}

</style>

</head>

<body>

<h2>II         SERVICES</h2>

</div>

</div>

<div class="card-title">RESEARCH<br>& ADVISORY</div>

<li>Market research</li>

<li>Feasibility studies</li>

<li>Risk assessment</li>

<li>Advisory services</li>

</ul>

<div class="card-link"><span class="arrow">→</span>CLICK</div>

</div>

<div class="card-title">PROJECT<br>MANAGEMENT</div>

<li>Initial feasibility studies</li>

<li>Coordination & oversight</li>

<li>Scheduling</li>

</ul>

<div class="card-link"><span class="arrow">→</span>CLICK</div>

</div>

<div class="card-title">PLANNING<br>& DESIGN</div>

<li>Site analysis & land use planning</li>

<li>Architecture & design management</li>

<li>Permitting</li>

</ul>

<div class="card-link"><span class="arrow">→</span>CLICK</div>

</div>

<div class="card-title">FINANCING<br>& BUDGETING</div>

<li>Financial feasibility & analysis</li>

<li>Funding acquisition</li>

<li>Budget management</li>

</ul>

<div class="card-link"><span class="arrow">→</span>CLICK</div>

</div>

<div class="card-title">CONSTRUCTION<br>MANAGEMENT</div>

<li>Contractor selection & procurement</li>

<li>On-site supervision</li>

<li>Progress reporting</li>

</ul>

<div class="card-link"><span class="arrow">→</span>CLICK</div>

</div>

<div class="card-title">MARKETING<br>& LEASING</div>

<li>Market analysis</li>

<li>Marketing strategy</li>

<li>Leasing & sales management</li>

</ul>

<div class="card-link"><span class="arrow">→</span>CLICK</div>

</div>

<div class="card-title">POST-CONSTRUCTION<br>SERVICES</div>

<li>Project handover</li>

<li>Property management setup</li>

<li>Performance evaluation</li>

</ul>

<div class="card-link"><span class="arrow">→</span>CLICK</div>

</div>

gsap.registerPlugin(ScrollTrigger);

window.addEventListener('load', () => {

const vh = window.innerHeight, vw = window.innerWidth;

const widthPrev = 30;

const cards = [

{ sel: '.card-2', from: 30, to: 5, dur: 1 },

{ sel: '.card-3', from: 60, to: 10, dur: 1 },

{ sel: '.card-4', from: 80, to: 15, dur: 1 },

{ sel: '.card-5', from: 85, to: 20, dur: 1 },

{ sel: '.card-6', from: 90, to: 25, dur: 1 },

{ sel: '.card-7', from: 95, to: 30, dur: 1 }

];

cards.forEach((card, i) => {

if (i === 0) card._start = 0;

else {

const prev = cards[i - 1];

const pLocal = (card.from - widthPrev - prev.from) / (prev.to - prev.from);

card._start = prev._start + prev.dur * pLocal;

}

});

const timelineScreens = Math.max(...cards.map(c => c._start + c.dur));

const scrollPx = timelineScreens * vh;

document.querySelector('.scroll-spacer').style.height = scrollPx + 'px';

const tl = gsap.timeline({

scrollTrigger: {

trigger: '.accordion-wrapper',

start: 'top top',

end: '+=' + scrollPx,

pin: true,

scrub: true,

invalidateOnRefresh: true

}

});

cards.forEach(card => {

tl.fromTo(

card.sel,

{ left: () => vw * card.from / 100 + 'px' },

{ left: () => vw * card.to / 100 + 'px', duration: card.dur, ease: 'none' },

card._start

);

});

ScrollTrigger.refresh();

});

</script>

<h3 class="popup-title">RESEARCH & ADVISORY</h3>

<p><strong>MARKET RESEARCH:</strong> Demand and competitive analysis. Demographic studies.</p>

<p><strong>FEASIBILITY STUDIES:</strong> Economic, technical, and regulatory feasibility assessments.</p>

<p><strong>RISK ASSESSMENT:</strong> Identifying and mitigating potential risks.</p>

<p><strong>ADVISORY SERVICES:</strong> Strategic planning and financial advisory. Regulatory compliance guidance.</p>

</div>

<h3 class="popup-title">PROJECT MANAGEMENT</h3>

<p><strong>INITIAL FEASIBILITY STUDIES:</strong> Assessing the viability of the project.</p>

<p><strong>COORDINATION AND OVERSIGHT:</strong> Managing the development team, including architects, engineers, contractors, and other consultants.</p>

<p><strong>SCHEDULING:</strong> Creating and maintaining project timelines to ensure timely completion.</p>

</div>

<h3 class="popup-title">PLANNING & DESIGN</h3>

<p><strong>SITE ANALYSIS & LAND USE PLANNING:</strong> Evaluating site conditions and obtaining necessary zoning & planning approvals.</p>

<p><strong>ARCHITECTURE & DESIGN MANAGEMENT:</strong> Collaborating with architects & designers to develop project plans that meet regulatory requirements & client specifications.</p>

<p><strong>PERMITTING:</strong> Securing all necessary permits and approvals from local authorities.</p>

</div>

<h3 class="popup-title">FINANCING & BUDGETING</h3>

<p><strong>FINANCIAL FEASIBILITY AND ANALYSIS:</strong> Preparing detailed financial models and cost estimates to ensure project viability.</p>

<p><strong>FUNDING ACQUISITION:</strong> Assisting clients in securing financing through loans, grants, or investor funding.</p>

<p><strong>BUDGET MANAGEMENT:</strong> Monitoring project expenses and ensuring adherence to the budget.</p>

</div>

<h3 class="popup-title">CONSTRUCTION MANAGEMENT</h3>

<p><strong>CONTRACTOR SELECTION AND PROCUREMENT:</strong> Managing the bidding process and selecting qualified contractors and suppliers.</p>

<p><strong>ON-SITE SUPERVISION:</strong> Overseeing construction activities to ensure quality control and adherence to project plans and specifications.</p>

<p><strong>PROGRESS REPORTING:</strong> Providing regular updates on construction progress and addressing any issues that arise.</p>

</div>

<h3 class="popup-title">MARKETING & LEASING</h3>

<p><strong>MARKET ANALYSIS:</strong> Conducting research to understand market conditions and identify target audiences.</p>

<p><strong>MARKETING STRATEGY:</strong> Developing and implementing marketing plans to promote the project.</p>

<p><strong>LEASING AND SALES MANAGEMENT:</strong> Coordinating with real estate agents and managing the leasing or sale of properties within the development.</p>

</div>

<h3 class="popup-title">POST-CONSTRUCTION SERVICES</h3>

<p><strong>PROJECT HANDOVER:</strong> Ensuring a smooth transition from construction to occupancy, including final inspections and punch list completion.</p>

<p><strong>PROPERTY MANAGEMENT SETUP:</strong> Assisting in the establishment of property management services if needed.</p>

<p><strong>PERFORMANCE EVALUATION:</strong> Reviewing project outcomes to ensure all objectives have been met and identifying areas for improvement in future projects.</p>

</div>

document.addEventListener('DOMContentLoaded', () => {

const overlay = document.querySelector('.popup-overlay');

document.querySelectorAll('.accordion-card').forEach(card => {

card.addEventListener('click', () => {

const id = card.dataset.popup;

const panel = document.getElementById(id);

if (!panel) return;

panel.classList.add('active');

overlay.classList.add('active');

});

document.querySelectorAll('.popup-close').forEach(btn => {

btn.addEventListener('click', e => {

e.stopPropagation();

btn.closest('.popup-panel').classList.remove('active');

overlay.classList.remove('active');

});

overlay.addEventListener('click', () => {

document.querySelectorAll('.popup-panel.active').forEach(p => p.classList.remove('active'));

overlay.classList.remove('active');

});

</script>

</body>

</html>