<div class="header typetura">
<nav>
<div class="logo">Explore</div>
<ul class="links">
<li>City Guides</li>
<li>Travel</li>
<li>Fashion</li>
<li>Art + Culture</li>
<li>Home + Design</li>
</ul>
</nav>
<img
class="header-img"
src="https://assets.codepen.io/467/2020-08-26+-+09-30-18_00007+copy.jpg"
alt=" "
/>
<div class="header-group">
<h3 class="label">Travel</h3>
<h1 class="primary-headline typetura">
How a road trip across The United States brought inspiration
</h1>
<h3 class="byline">Gabrielle Kellner</h3>
<h4 class="dateline">July 23, 2020</h4>
</div>
</div>
<article class="article">
<p class="big typetura">
Lauren Paul and her husband spent all of last week cancelling their
honeymoon. “We were devastated until we realized how dangerous not
cancelling would have been for all of the hospitality workers we would
have depended on.” Lauren reported. Not one to dwell on life’s curve
balls, Lauren and Jose decided to bring a little Provence into their
home. “We had already done so much research on the food, the farming
culture, the way people care for the land in Provence. We thought, why
not spend a day pretending we’re there.”
</p>
<figure class="float-right">
<img
src="https://assets.codepen.io/467/2020-08-26+-+10-00-36_00027.jpg"
alt=" "
/>
<figcaption>Photographed by Scott Kellum</figcaption>
</figure>
<p>
If you’re anything like us here at Lost In Place, your much needed alone
time (or family/roomate/coworker pile-on) has turned to much needed
social time. But hanging out indoors and widening our circles of
exposure is irresponsible at best. But with warmer weather, comes a
lovely solution: the picnic. So we have outlined everything you need to
meet up, be safe, and mangia.
</p>
<p>
Connection is one of the most vital aspects of human life. Not just
entertainment, we need to form emotional attachments to survive.
</p>
<p>
When you’re commuting to a 9-to-5, you long for the weekends, the beach
and the get-things-done, life-organizing staycation. Our current
environment has turned life on its head, and now more than ever we dream
of being anywhere but at home. Until a quick trip to a new locale is an
option, we’ve got everything you need to get away at home.
</p>
<p>
My mother spoke Spanish with us at home from birth, through our
disdainful teenage years, and on every phone call until the day she
passed. When I was a youngster without the perspective that comes with
experience, I asked her why she was so dedicated to us being bilingual.
The simple answer, “If you and your sister do not know Spanish, you
cannot teach it to your children.”
</p>
<figure>
<img
src="https://assets.codepen.io/467/2020-08-26+-+10-00-36_00047.jpg"
/>
<figcaption>Photographed by Scott Kellum</figcaption>
</figure>
<p>
Our Look Up Column is normally dedicated to the different ways travel
gets you out of your digital dungeon, and into a new way of experiencing
life. Since our writers and photographers are at home for the
foreseeable future, Look Up will now dedicate space to finding that same
feeling in the sky. Each week a writer and a photographer will team up
to show and tell how the sky has changed in their city, and how the act
of slowing down and giving attention to something so simple has carried
over into life.
</p>
<figure>
<img
src="https://assets.codepen.io/467/2020-08-26+-+10-00-36_00025.jpg"
/>
<figcaption>Photographed by Scott Kellum</figcaption>
</figure>
<p>
Lauren Paul and her husband spent all of last week cancelling their
honeymoon. “We were devastated until we realized how dangerous not
cancelling would have been for all of the hospitality workers we would
have depended on.” Lauren reported. Not one to dwell on life’s curve
balls, Lauren and Jose decided to bring a little Provence into their
home. “We had already done so much research on the food, the farming
culture, the way people care for the land in Provence. We thought, why
not spend a day pretending we’re there.”
</p>
</article>
<section class="nextclicks typetura">
<h2 class="section-label">Related Stories</h2>
<a class="nextclick-article typetura">
<h4 class="eyebrow">City Guides</h4>
<img
src="https://assets.codepen.io/467/2020-05-17+-+22-13-52_00059.jpg"
alt=" "
/>
<h3 class="primary-headline typetura">
When Everyday is a Staycation, How to Get Away While You’re at Home
</h3>
</a>
<a class="nextclick-article typetura">
<h4 class="eyebrow">Travel</h4>
<img
src="https://assets.codepen.io/467/2020-05-02+-+00-57-32_5.jpg"
alt=" "
/>
<h3 class="primary-headline typetura">
A Step-by-Step Guide to Picnicking PPE
</h3>
</a>
<a class="nextclick-article typetura">
<h4 class="eyebrow">Home + Design</h4>
<img
src="https://assets.codepen.io/467/2020-03-10+-+03-47-34_1.jpg"
alt=" "
/>
<h3 class="primary-headline typetura">
Provence in the Livingroom, a Day of Food and Customs to Transport You
to the South of France
</h3>
</a>
</section>
<section class="nextclicks">
<h2 class="section-label">Explore More in Travel</h2>
<a class="nextclick-article typetura">
<img
src="https://assets.codepen.io/467/2020-08-26+-+10-00-36_00030.jpg"
alt=" "
/>
<h3 class="primary-headline typetura">
Why Learning a Language is More Important Than Ever
</h3>
</a>
<a class="nextclick-article typetura">
<img
src="https://assets.codepen.io/467/2020-05-17+-+21-46-49_00048.jpg"
alt=" "
/>
<h3 class="primary-headline typetura">
Top Five Day Trip Destinations That Will Feel Like Old Times
</h3>
</a>
<a class="nextclick-article typetura">
<img
src="https://assets.codepen.io/467/2020-08-26+-+10-00-36_00047.jpg"
alt=" "
/>
<h3 class="primary-headline typetura">
How a road trip across The United States brought inspiration
</h3>
</a>
</section>
<footer>
<div class="logo">Explore</div>
<ul class="links">
<li>City Guides</li>
<li>Travel</li>
<li>Fashion</li>
<li>Art + Culture</li>
<li>Home + Design</li>
</ul>
<small>
Explore is a small group of explorers sharing our experiences as we head
out to find new and exciting places. Road trips, day trips, or long
excursions, we’re excited to share them with you.
</small>
<small>
Special thank you to <a href="www.c-a-s-t.com">CAST</a> for providing <a href="http://solesans.c-a-s-t.com/">Sole Sans</a> for the text of this demo and to
<a href="https://djr.com/">David Jonathan Ross</a> and
<a href="https://fontofthemonth.club/">Font of the Month Club</a> for
<a href="https://djr.com/notes/job-clarendon-font-of-the-month"
>Job Clarendon</a
>
and
<a
href="https://djr.com/notes/roslindale-display-widths-font-of-the-month"
>Roslindale</a
>.
</small>
</footer>
<div class="tt-configuration">
<h2>Headings</h2>
<button class="tt-close" onclick="ttClose()">close</button>
<div class="tt-configuration-inner">
<div>
<h3>Font Family</h3>
<label
><input
id="fontFamily"
type="text"
value="roslindale-variable"
oninput="writeCurve(p1, p2)"
/></label>
<h3>Max Size</h3>
<label
><input
id="maxSize"
type="number"
value="120"
step="1"
oninput="writeCurve(p1, p2)"
/>
px</label
>
<h3>Area</h3>
<label
><input
id="area"
type="number"
value="1400"
step="10"
oninput="writeCurve(p1, p2)"
/>
px</label
>
</div>
<svg
viewBox="-10 -10 120 120"
xmlns="http://www.w3.org/2000/svg"
id="easing"
class="tt-easing"
>
<rect width="100" height="100" fill="#ffffff88" stroke="#eeeeee" />
<rect id="tt-marker" width="1" height="100" x="80" fill="#348ceb88" />
<text id="tt-currentpx" x="20" y="-4px">20px</text>
<line
id="tt-line-start"
x1="0"
y1="100"
x2="20"
y2="30"
stroke="#00000033"
stroke-linecap="round"
/>
<line
id="tt-line-end"
x1="100"
y1="0"
x2="80"
y2="20"
stroke="#00000033"
stroke-linecap="round"
/>
<path
id="tt-path"
d="M0 100 C 20 30 80 20 100 0"
stroke="#348ceb"
fill="none"
stroke-linecap="round"
/>
<circle
class="tt-ease-handle"
id="ease-start"
cx="20"
cy="30"
r="3"
fill="#fff"
stroke="#999"
/>
<circle
class="tt-ease-handle"
id="ease-end"
cx="80"
cy="20"
r="3"
fill="#fff"
stroke="#999"
/>
</svg>
</div>
</div>
/*
Set up and base styles and root level intrinsic typography.
This allows scaling to very small sizes.
https://docs.typetura.com/
*/
:root {
--tt-key: root;
--tt-ease: cubic-bezier(0, 0, 0.4, 1);
--tt-max: 400;
--max-width: 45rem;
--font-headline: "Roslindale", serif;
--font-text: "Sole Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
"Segoe UI Symbol";
--font-small: "Roslindale", serif;
--color: hsl(8deg, 72%, 50%);
color: hsl(0, 0%, 15%);
font-size: 100%;
line-height: 1.5;
font-family: var(--font-text);
font-stretch: 100%;
font-weight: 350;
font-optical-sizing: auto;
}
@keyframes root {
0% {
/* Yes, the font size is 0, but so is the viewport width.
This scales to a value over 16px rapidly. */
font-size: 0%;
/* Unitless line height can be used with this method. */
line-height: 1.15;
/* Variable fonts can also be adjusted with this method.
This gives you way more control over your typography. */
font-weight: 400;
font-stretch: 115%;
}
100% {
/* Here we have a value equivilent to 18px at a default base of 16px.
Note that user base font sizes can be inherited here,
this improves accessibility over viewport unit based font scaling. */
font-size: 112.5%;
line-height: 1.45;
font-weight: 350;
font-stretch: 105%;
}
}
/* Other typographic styles */
.primary-headline {
--tt-key: primary-headline;
--tt-ease: cubic-bezier(0.65, 0, 0.5, 1);
--tt-max: 900;
font-family: var(--font-headline);
line-height: 1;
}
@keyframes primary-headline {
0% {
line-height: 1.1;
font-size: 0.75rem;
letter-spacing: 0.02em;
font-weight: 700;
}
80% {
font-weight: 550;
}
100% {
line-height: 1.03;
font-size: 84px;
letter-spacing: 0.01em;
font-weight: 500;
}
}
.big {
font-size: 1.35em;
line-height: 1.2;
font-weight: 400;
color: #655;
--tt-key: big;
--tt-max: 800;
--tt-ease: ease-in-out;
}
@keyframes big {
0% {
font-size: 1rem;
line-height: 1.3;
color: #433;
}
100% {
font-size: 1.4rem;
line-height: 1.35;
color: #766;
}
}
.big:after {
content: "";
display: block;
height: 1rem;
margin: 2rem 0 3rem;
background: url("https://assets.codepen.io/467/plane.svg"),
linear-gradient(hsl(0, 0%, 94%), hsl(0, 0%, 94%));
background-repeat: no-repeat, repeat-x;
background-size: contain, 2px 2px;
background-position: center center;
}
.section-label {
display: table;
margin: 1rem auto;
font-family: "Job Clarendon", var(--font-headline);
letter-spacing: 0.03em;
grid-column-end: span 3;
font-weight: 700;
--tt-max: 1200;
--tt-key: section-label;
--tt-ease: linear;
}
@keyframes section-label {
0% {
font-size: 1rem;
font-weight: 500;
}
100% {
font-size: 2rem;
font-weight: 700;
}
}
/* Because our root styles scale to the viewport, relative units will inherit that flexibility. */
.label {
font-family: var(--font-text);
text-transform: uppercase;
font-size: 0.65rem;
font-weight: 450;
letter-spacing: 0.1em;
color: var(--color);
line-height: 1;
font-stretch: 125%;
}
.byline::before {
content: "";
width: 3rem;
height: 2px;
background: var(--color);
position: absolute;
top: 0;
}
.byline {
font-family: var(--font-text);
text-transform: uppercase;
font-size: 0.7rem;
font-weight: 350;
letter-spacing: 0.1em;
padding-top: 0.7rem;
position: relative;
margin: 1rem 0 0;
line-height: 1;
font-stretch: 100%;
}
.dateline {
font-family: var(--font-text);
text-transform: uppercase;
font-size: 0.5rem;
font-weight: 300;
letter-spacing: 0.1em;
opacity: 0.67;
padding-top: 0.7rem;
position: relative;
margin: 0 0 2rem;
line-height: 1;
font-stretch: 90%;
}
figcaption,
.caption {
font-family: var(--font-small);
font-size: 0.7rem;
font-weight: 400;
line-height: 1.25;
margin-top: 0.3rem;
padding-bottom: 0.4rem;
margin-bottom: 0.3rem;
font-style: italic;
color: #555;
}
.logo {
font-size: 2.5rem;
line-height: 1;
color: var(--color);
font-family: "Job Clarendon", var(--font-headline);
text-transform: uppercase;
font-weight: 450;
}
/* This technique doesn’t need to be limited to typogrphy. You can also interpolate any animatable element style. */
@media (min-width: 35em) {
.float-left {
float: left;
margin-right: 1rem;
width: 40%;
min-width: 300px;
--tt-key: float-left;
--tt-max: 1300;
--tt-ease: ease-out;
}
.float-right {
float: right;
margin-left: 1rem;
width: 40%;
min-width: 300px;
--tt-key: float-right;
--tt-max: 1300;
--tt-ease: ease-out;
}
}
@keyframes float-left {
80% {
margin-left: 0;
}
100% {
margin-left: -8rem;
}
}
@keyframes float-right {
80% {
margin-right: 0;
}
100% {
margin-right: -8rem;
}
}
/*
Sole Sans by CAST Foundry
license it here: http://solesans.c-a-s-t.com/
*/
@font-face {
font-family: "Sole Sans";
src: url("https://assets.codepen.io/467/SoleSansVF_W.woff2")
format("woff2-variations");
font-weight: 100 900;
font-stretch: 60% 125%;
}
/*
Roslindale and Job Clarendon by DJR from the Font of the Month Club
license them here: https://djr.com/font-of-the-month-club
*/
@font-face {
font-family: "Roslindale";
src: url("https://assets.codepen.io/467/RoslindaleVariable-VF.woff2")
format("woff2-variations");
font-weight: 200 900;
}
@font-face {
font-family: "Job Clarendon";
src: url("https://assets.codepen.io/467/JobClarendonVariable-VF.woff2")
format("woff2-variations");
font-weight: 100 900;
}
/* Layout styles */
body {
margin: 0;
padding: 0;
}
img {
display: block;
width: 100%;
}
a:is(:link, :visited) {
color: var(--color);
}
.header {
padding: 0 5vw 5vw 0;
display: grid;
grid-template-columns: 1.5fr 2rem 1fr;
grid-template-rows: min-content auto min-content auto;
position: relative;
}
.header:before {
content: "";
background-color: hsl(0, 0%, 94%);
position: absolute;
left: calc(50vw - calc(var(--max-width) / 2));
right: 0;
top: 0;
bottom: 0;
z-index: -1;
}
nav {
position: fixed;
display: flex;
align-items: center;
top: 0;
left: calc(50vw - (var(--max-width) / 2));
right: 0;
padding: 0.5rem;
background-color: #fff;
box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.173);
z-index: 9;
border-bottom: 2px solid var(--color);
}
@supports (backdrop-filter: blur(1rem)) {
nav {
background-color: rgba(255, 255, 255, 0.735);
backdrop-filter: blur(1rem);
}
}
@media (max-width: 900px) {
body {
margin-top: 3rem;
}
nav {
left: 0;
}
nav .links {
display: none;
}
.header:before {
left: 1rem;
}
}
.links {
display: flex;
list-style: none;
margin: 0 0 0 1rem;
padding: 0;
font-size: 1.2rem;
font-stretch: 60%;
}
.links li {
padding: 0 0.5rem;
}
.header-img {
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 5;
}
.header-group {
grid-column-start: 2;
grid-column-end: 4;
grid-row-start: 3;
grid-row-end: 4;
background: #fff;
padding: 1rem 2rem 0;
margin-top: 4rem;
box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.173);
max-width: 55rem;
}
@media (max-width: 50em) {
.header-img {
grid-column-start: 1;
grid-column-end: 4;
grid-row-start: 1;
grid-row-end: 3;
}
.header-group {
grid-column-start: 1;
grid-column-end: 4;
grid-row-start: 3;
grid-row-end: 4;
margin-top: 0;
}
}
@media (max-width: 20em) {
.header-group {
padding: 1rem 1rem 0;
}
}
@supports (backdrop-filter: blur(1rem)) {
.header-group {
background: rgba(255, 255, 255, 0.735);
backdrop-filter: blur(1rem);
}
}
.article {
padding: 1rem;
margin: auto;
max-width: calc( var(--max-width) - 1rem);
}
figure {
margin: 0;
padding: 0;
}
.nextclicks {
margin: 3rem auto 0;
width: calc(100% - 4rem);
max-width: 1200px;
}
.nextclicks img {
height: calc(0.67px * var(--tt-bind));
object-fit: cover;
}
article + .nextclicks {
margin-top: 10vh;
}
@media (min-width: 40em) {
.nextclicks {
display: grid;
grid-template-rows: auto auto;
grid-template-columns: repeat(3, 1fr);
grid-column-gap: 2em;
}
.section-label:before,
.section-label:after {
content: " ";
width: 3em;
height: 0.8em;
display: inline-block;
background-image: linear-gradient(currentColor, currentColor);
background-size: 1px 1px;
margin: 0 1em;
opacity: 0.33;
background-repeat: repeat-x;
background-position: center center;
}
}
.nextclick-article {
display: block;
text-align: center;
}
.eyebrow {
margin: 0 0 -1.1rem;
text-transform: uppercase;
font-weight: 400;
letter-spacing: 0.25em;
font-size: 0.7em;
background: #fff;
padding: 0 0.5em 0.37em 0;
position: relative;
display: table;
color: var(--color);
}
footer {
text-align: center;
background-color: hsl(0, 0%, 94%);
border-top: 2px solid var(--color);
margin-top: 20vh;
padding: 2rem 0 20vh;
}
footer .links {
padding: 0;
margin: 2rem auto;
justify-content: center;
}
footer small {
display: block;
max-width: var(--max-width);
font-size: 0.75rem;
line-height: 1.25;
margin: 0 auto;
padding: 1em 2rem;
}
/* Styles for the intrinsic style inspector. These are not for page styles */
.primary-headline {
position: relative;
cursor: pointer;
}
.primary-headline:hover {
color: var(--color);
}
.primary-headline:hover:after {
content: 'Inspect style';
position: absolute;
font-family: var(--font-text);
font-size: 0.7rem;
border-radius: 6rem;
background: #fff;
border: 1px solid var(--color);
color: hsl(0, 0%, 15%);
padding: 0.3rem 0.4rem;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
font-stretch: 90%;
}
@supports (backdrop-filter: blur(1rem)) {
.primary-headline:hover:after {
background: #ffffff77;
backdrop-filter: blur(1rem)
}
}
.tt-configuration,
.tt-configuration * {
font-family: var(--font-text);
font-size: 14px;
font-weight: 400;
color: #333;
}
.tt-configuration {
display: none;
width: 380px;
padding: 10px 0 10px 20px;
position: fixed;
bottom: 1rem;
left: 0;
right: 0;
margin: 0 auto;
background: #ffffff;
border-radius: 4px;
backdrop-filter: blur(10px);
box-shadow: 0 6px 30px #00000055;
animation: tt-configuration 0.2s ease-out 1;
}
.tt-configuration.active {
display: block;
}
@keyframes tt-configuration {
0% {
opacity: 0;
transform: scale(0.8) translateY(-80%) translateX(10%);
}
}
.tt-configuration-inner {
display: flex;
}
.tt-configuration input {
background: none;
border-radius: none;
border: 0 solid #00000033;
border-bottom-width: 2px;
transition: border-color 0.2s ease-in-out;
}
.tt-configuration input:focus {
border-color: #348ceb;
outline: none;
}
.tt-configuration h2 {
font-weight: 700;
font-size: 18px;
margin: 0 0 6px;
}
.tt-configuration h3 {
margin: 12px 0 4px;
text-transform: uppercase;
letter-spacing: 0.13em;
font-size: 9px;
font-weight: 500;
opacity: 0.75;
}
.tt-easing {
width: 160px;
height: 160px;
stroke-width: 2;
position: relative;
}
.tt-ease-handle {
cursor: pointer;
}
.tt-close {
border: none;
padding: 0;
background: none;
outline: none;
position: absolute;
top: 12px;
right: 20px;
opacity: 0.2;
transition: opacity 0.2s ease-in-out;
cursor: pointer;
}
.tt-close:hover {
opacity: 0.8;
}
#tt-currentpx {
font-size: 7px;
font-family: var(--font-text);
font-weight: 400;
opacity: 0.5;
text-align: center;
}// The Typetura script can be found at
// https://github.com/Typetura/Typetura
// The following is NOT the Typetura script. This is for the Typetura visualizer. Click on a headline to view it.
var cssTarget = ".primary-headline";
var css = document.createElement("style");
document.body.appendChild(css);
var p1 = [65, 100];
var p2 = [50, 0];
var fontFamily = "Roslindale";
var maxSize = 84;
var area = 900;
var activeWidth = 0;
var easing = document.getElementById("easing");
var easeStart = document.getElementById("ease-start");
var easeEnd = document.getElementById("ease-end");
var path = document.getElementById("tt-path");
var lineStart = document.getElementById("tt-line-start");
var lineEnd = document.getElementById("tt-line-end");
var ttModal = document.querySelector(".tt-configuration");
var inputFontFamily = document.getElementById("fontFamily");
var inputMaxSize = document.getElementById("maxSize");
var inputArea = document.getElementById("area");
var textMarker = document.getElementById("tt-marker");
var cuttentPX = document.getElementById("tt-currentpx");
var selectedEliment = document.querySelector(cssTarget);
inputFontFamily.value = fontFamily;
inputMaxSize.value = maxSize;
inputArea.value = area;
var xDif = 0;
var yDif = 0;
var moveMode = null;
// INIT
easeStart.setAttribute("cx", p1[0]);
easeStart.setAttribute("cy", p1[1]);
lineStart.setAttribute("x2", p1[0]);
lineStart.setAttribute("y2", p1[1]);
easeEnd.setAttribute("cx", p2[0]);
easeEnd.setAttribute("cy", p2[1]);
lineEnd.setAttribute("x2", p2[0]);
lineEnd.setAttribute("y2", p2[1]);
path.setAttribute(
"d",
`M0 100 C ${p1[0]} ${p1[1]} ${p2[0]} ${p2[1]} 100 0`
);
// Functions
function ttOpen() {
ttModal.classList.add("active");
}
function ttClose() {
ttModal.classList.remove("active");
}
function writeCurve(p1, p2) {
fontFamily = inputFontFamily.value;
maxSize = inputMaxSize.value;
area = inputArea.value;
css.innerHTML = `
${cssTarget} {
font-family: ${fontFamily};
--tt-max: ${area};
--tt-ease: cubic-bezier(${p1[0] / 100},${1 - p1[1] / 100},${
p2[0] / 100
},${1 - p2[1] / 100});
}
@keyframes primary-headline {
0% {
line-height: 1.1;
font-size: .75rem;
font-weight: 700;
letter-spacing: 0.02em;
font-variation-settings: "opsz" 16;
font-stretch: 50%;
}
80% {
font-variation-settings: "opsz" 48;
}
100% {
line-height: 1.03;
font-size: ${maxSize}px;
font-weight: 500;
letter-spacing: 0.01em;
font-variation-settings: "opsz" 48;
font-stretch: 90%;
}
}
`;
moveMarker(selectedEliment.offsetWidth);
}
function moveMarker(width) {
textMarker.setAttribute("x", (width / area) * 100 - 0.5);
cuttentPX.setAttribute("x", (width / area) * 100 - 10);
cuttentPX.innerHTML =
parseInt(
window
.getComputedStyle(selectedEliment)
.getPropertyValue("font-size")
.replace("px", "")
) + "px";
}
const resizeObserver = new ResizeObserver((entries) => {
moveMarker(selectedEliment.offsetWidth);
});
resizeObserver.observe(selectedEliment);
var cssTargets = document.querySelectorAll(cssTarget);
for (var i = 0; i < cssTargets.length; i++) {
const el = cssTargets[i];
cssTargets[i].addEventListener("mousedown", (e) => {
selectedEliment = el;
moveMarker(selectedEliment.offsetWidth);
ttOpen();
});
}
function initStart(event) {
moveMode = "start";
xDif = event.clientX;
yDif = event.clientY;
document.onmousemove = moveStart;
event.preventDefault();
}
function initEnd(event) {
moveMode = "end";
xDif = event.clientX;
yDif = event.clientY;
document.onmousemove = moveEnd;
event.preventDefault();
}
function moveStart(event) {
var x = (event.clientX - xDif) / 1.4;
var y = (event.clientY - yDif) / 1.4;
var p1a = p1[0] + x;
var p1b = p1[1] + y;
easeStart.setAttribute("cx", p1a);
easeStart.setAttribute("cy", p1b);
lineStart.setAttribute("x2", p1a);
lineStart.setAttribute("y2", p1b);
path.setAttribute(
"d",
`M0 100 C ${p1a} ${p1b} ${p2[0]} ${p2[1]} 100 0`
);
writeCurve([p1a, p1b], p2);
}
function moveEnd(event) {
var x = (event.clientX - xDif) / 1.4;
var y = (event.clientY - yDif) / 1.4;
var p2a = p2[0] + x;
var p2b = p2[1] + y;
easeEnd.setAttribute("cx", p2a);
easeEnd.setAttribute("cy", p2b);
lineEnd.setAttribute("x2", p2a);
lineEnd.setAttribute("y2", p2b);
path.setAttribute(
"d",
`M0 100 C ${p1[0]} ${p1[1]} ${p2a} ${p2b} 100 0`
);
writeCurve(p1, [p2a, p2b]);
}
function endBoth(event) {
if (moveMode === "start") {
var x = (event.clientX - xDif) / 1.4;
var y = (event.clientY - yDif) / 1.4;
p1[0] = p1[0] + x;
p1[1] = p1[1] + y;
} else if (moveMode === "end") {
var x = (event.clientX - xDif) / 1.4;
var y = (event.clientY - yDif) / 1.4;
p2[0] = p2[0] + x;
p2[1] = p2[1] + y;
}
moveMode = null;
document.onmousemove = null;
}
const container = document.querySelector(".container");
const view = document.querySelector(".view");
easeStart.onmousedown = initStart;
easeEnd.onmousedown = initEnd;
document.onmouseup = endBoth;
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.