Add sound and basic zoom function
This commit is contained in:
Hyunchul Kim
parent
26845117f3
commit
66b7f14922
8 changed files with 108 additions and 108 deletions
|
|
@ -35,7 +35,7 @@
|
|||
</span>
|
||||
|
||||
<span id="sound">
|
||||
<a onClick="toggleZoom()">
|
||||
<a onClick="toggleSound()">
|
||||
<img src='src/img/sound_on.svg'>
|
||||
</a>
|
||||
</span>
|
||||
|
|
@ -197,6 +197,8 @@
|
|||
|
||||
</script>
|
||||
|
||||
<script src="src/scripts/accessibility.js"></script>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,85 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>환대의 조각들 Fragments of Hospitality</title>
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="stylesheet" type="text/css" href="/src/style/common.css" />
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
|
||||
<script src="/src/scripts/mobileScroll.js"></script>
|
||||
<script type="text/javascript" src="/ynh_portal.js"></script><link type="text/css" rel="stylesheet" href="/ynh_overlay.css"></link><script type="text/javascript" src="/ynhtheme/custom_portal.js"></script><link type="text/css" rel="stylesheet" href="/ynhtheme/custom_overlay.css"></link><script type="text/javascript" src="/ynh_portal.js"></script><link type="text/css" rel="stylesheet" href="/ynh_overlay.css"></link><script type="text/javascript" src="/ynhtheme/custom_portal.js"></script><link type="text/css" rel="stylesheet" href="/ynhtheme/custom_overlay.css"></link></head>
|
||||
<body>
|
||||
<div>
|
||||
<div id="menu">
|
||||
<div id="logo_wrapper" class="svg_wrapper">
|
||||
<a href="/">
|
||||
<img id="logo_foh"src="src/img/logo.svg" alt="환대의 조각 로고">
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<span id="to_about">
|
||||
<a href="/about.html">
|
||||
ABOUT
|
||||
</a>
|
||||
</span>
|
||||
<span id="to_fragments">
|
||||
<a href="/participants.html">
|
||||
FRAGMENTS
|
||||
</a>
|
||||
</span>
|
||||
|
||||
<div id="margin">
|
||||
<!-- to avoid overlapping -->
|
||||
</div>
|
||||
|
||||
<div id="contents">
|
||||
<div id="about_wrapper">
|
||||
<p class="col">
|
||||
We are collecting some fragments. The mutually dependent differences exist like the snow crystals that drift without any past, future, or memory, while refusing to become identical, and revealing each one of them as they glitter. We try to imagine the art of the future based on these fragments.
|
||||
<a id="wrapper_coc" href="http://never.gonetis.com:9002/p/0000fregments_of_hospitality" target="_blank">
|
||||
<img id="icon_coc" src="src/img/icon_coc.svg" alt="꽃모양 선언문 버튼">
|
||||
go to code of conduct
|
||||
</a>
|
||||
</p>
|
||||
<p class="col">
|
||||
<b>Co-creators</b></br>
|
||||
109, blblblg, MC.mama, Eunjeong Gu, Grace-Kim, Hyunchul Kim, Dah Yee Noh, Nodl, *diana lab, Dolgoreh, mooming, Insook Bae, Korean_Peoples_Solidarity_Against_Poverty, Song Soo, Min Shin, Jae Shin, Sewon An, Seungwook Yang, Oro Minkyung, Wonjung, yuhee, doohoyi, yiyagi, Ichimura Misako, Jinho Jeong, Ueta Jiro, Hamamu, Megumi, Hong Seo Yeon</br>
|
||||
</br>
|
||||
*dianalab is a group that studies and carries out the expression to share and join in with the social minorities. It is a collective of diverse people, who do media art, sound art, textile, photography, film, etc. for their individual work, and have been working on the delicate work of creating an entirety of work from physical space to moments and invisible air.
|
||||
</br></br>
|
||||
|
||||
|
||||
Design: Dah Yee Noh</br>
|
||||
Video & Streaming: Jiro Ueta, 이야기</br>
|
||||
Web: Hyunchul Kim, Sewon An, doohoyi, Wonjung</br>
|
||||
Promotion: Eunhye</br>
|
||||
translation: Soonyoung Choi</br>
|
||||
|
||||
</p>
|
||||
<p class="col">
|
||||
<b>Story Behind the Design of Fragments of Hospitality</b></br>
|
||||
In an academic paper on “snow crystals”, Dr. Ukichiro Nakaya presents years of his observation pertaining to how and in what forms the snow crystals are formed. Contrary to the common understanding that they only take a couple of forms, snow crystals actually assume numerous forms depending on climate, temperature, and region. The fact that white snow crystals that come to us on a dark winter night as if they are giving us hospitality, in fact, reveal such diverse types and shapes, seems to fit right into our “fragments of hospitality” project. Like Dr. Nakaya, inspired by the work done by various artists and participants, we draw forms that have become abstract. Eventually, those fragments would diversify to have emotions, glitter like the snow crystals, or become mixed together and turn into water.
|
||||
</br></br>
|
||||
<b>Methods of connection</b></br>
|
||||
Individuals collecting fragments each have their own folder. When they put a story, picture, audio, or video file inside a folder, each fragment is assigned a serial number, and gets accumulated in the fragments of hospitality website.The fragments connect us.
|
||||
We hope that we can choose the “nature and attitude” of the medium that mediates our connection.
|
||||
</br></br>
|
||||
*We borrowed the method of exchange and sharing from distribusi, a project that proposes the form of publication that documents and updates communal project.
|
||||
<a href="https://test.roelof.info/nooo2-three-takes-on-taking-care.html" target="_blank">디스트리붓시</a>
|
||||
</p>
|
||||
|
||||
<div id="wrapper_sns">
|
||||
<a href="https://instagram.com/fragments_1444/" target="_blank">
|
||||
<img id="icon_ig" src="src/img/instagram.svg" alt="인스타그램 버튼 instagram button"></a>
|
||||
<a href="https://www.facebook.com/fragments1444/" target="_blank">
|
||||
<img id="icon_fb" src="src/img/facebook.svg" alt="페이스북 버튼 facebook button"></a>
|
||||
<a href="?????" target="_blank">
|
||||
<img id="icon_fb" src="src/img/youtube.svg" alt="유튜브 버튼 youtube button"></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -38,13 +38,14 @@
|
|||
|
||||
<span id="zoom">
|
||||
<a onClick="toggleZoom()">
|
||||
<img src='src/img/activate_bigletter.svg'>
|
||||
<img src='/src/img/activate_bigletter.svg'>
|
||||
</a>
|
||||
</span>
|
||||
|
||||
<span id="sound">
|
||||
<a href="/events/list.html">
|
||||
<img src='src/img/sound_on.svg'>
|
||||
<a onClick="toggleSound()">
|
||||
<img src='/src/img/sound_on.svg'>
|
||||
<audio id="sound" src="/src/sound/test_sound.mp3" style="display: none;"></audio>
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
|
|
@ -306,7 +307,7 @@
|
|||
</svg>
|
||||
</div>
|
||||
<script src="src/scripts/updateFragment.js"></script>
|
||||
<script src="src/scripts/zoom.js"></script>
|
||||
<script src="src/scripts/accessibility.js"></script>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -45,7 +45,7 @@
|
|||
</span>
|
||||
|
||||
<span id="sound">
|
||||
<a onClick="toggleZoom()">
|
||||
<a onClick="toggleSound()">
|
||||
<img src='src/img/sound_on.svg'>
|
||||
</a>
|
||||
</span>
|
||||
|
|
@ -303,5 +303,6 @@
|
|||
|
||||
<!-- <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1080 734"> -->
|
||||
<script src="src/scripts/physicsLayout.js"></script>
|
||||
<script src="src/scripts/accessibility.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
93
test_data/src/scripts/accessibility.js
Normal file
93
test_data/src/scripts/accessibility.js
Normal file
|
|
@ -0,0 +1,93 @@
|
|||
|
||||
let isZoomed = false;
|
||||
let thresholdForButtons = 1080;
|
||||
|
||||
window.onresize = () => {
|
||||
if (window.innerWidth < thresholdForButtons && isZoomed) {
|
||||
const zoom = document.querySelector("#zoom")
|
||||
const sound = document.querySelector("#sound")
|
||||
zoom.style.right = "5px";
|
||||
sound.style.top = "85px";
|
||||
} else {
|
||||
const zoom = document.querySelector("#zoom")
|
||||
const sound = document.querySelector("#sound")
|
||||
zoom.style.right = "";
|
||||
sound.style.top = "";
|
||||
}
|
||||
}
|
||||
|
||||
function toggleZoom(){
|
||||
const isDefault = (document.body.style.zoom == "100%");
|
||||
|
||||
if (isDefault){
|
||||
document.body.style.zoom = "150%"
|
||||
|
||||
// Toggle image
|
||||
const img = document.querySelector('#zoom>a>img')
|
||||
img.src = "/src/img/deactivate_bigletter.svg"
|
||||
|
||||
|
||||
// Respond to Zoom Icon
|
||||
if (window.innerWidth < thresholdForButtons){
|
||||
const zoom = document.querySelector("#zoom")
|
||||
const sound = document.querySelector("#sound")
|
||||
zoom.style.right = "5px";
|
||||
sound.style.top = "85px";
|
||||
}
|
||||
|
||||
isZoomed = true;
|
||||
|
||||
}else {
|
||||
document.body.style.zoom = "100%"
|
||||
|
||||
// Toggle image
|
||||
const img = document.querySelector('#zoom>a>img')
|
||||
img.src = "/src/img/activate_bigletter.svg"
|
||||
|
||||
// Respond to Zoom Icon
|
||||
const zoom = document.querySelector("#zoom")
|
||||
const sound = document.querySelector("#sound")
|
||||
zoom.style.right = "";
|
||||
sound.style.top = "";
|
||||
|
||||
isZoomed = true;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
const sound_src = (() => {
|
||||
const pathname = window.location.pathname;
|
||||
if (pathname.indexOf('about') != -1){
|
||||
return new Audio('/src/sound/test_sound.mp3');
|
||||
} else if (pathname.indexOf('particiapnts') != -1){
|
||||
return new Audio('/src/sound/test_sound.mp3');
|
||||
}
|
||||
return new Audio('/src/sound/test_sound.mp3');
|
||||
})();
|
||||
|
||||
|
||||
function toggleSound(){
|
||||
// This function should be executed by a user interaction to work properly
|
||||
|
||||
if (sound_src.paused == true) {
|
||||
// Play sound
|
||||
sound_src.play()
|
||||
console.log("good");
|
||||
|
||||
// Toggle Image
|
||||
const img = document.querySelector('#sound>a>img')
|
||||
img.src = "/src/img/sound_off.svg"
|
||||
img.style.height = "64px"
|
||||
|
||||
} else {
|
||||
// Stop sound
|
||||
sound_src.pause();
|
||||
sound_src.currentTime = 0;
|
||||
console.log("sound", sound_src);
|
||||
|
||||
// Toggle Image
|
||||
const img = document.querySelector('#sound>a>img')
|
||||
img.src = "/src/img/sound_on.svg"
|
||||
img.style.height = "60px"
|
||||
}
|
||||
}
|
||||
|
|
@ -1,14 +0,0 @@
|
|||
let zoomButton = document.querySelector('#zoom');
|
||||
|
||||
document.body.style.zoom = document.cookie.zoom
|
||||
|
||||
function toggleZoom(){
|
||||
if (document.cookie.zoom == 100){
|
||||
document.cookie.zoom = 150;
|
||||
|
||||
}else {
|
||||
document.cookie.zoom = 100;
|
||||
}
|
||||
window.location.reload()
|
||||
}
|
||||
|
||||
BIN
test_data/src/sound/test_sound.mp3
Normal file
BIN
test_data/src/sound/test_sound.mp3
Normal file
Binary file not shown.
|
|
@ -151,9 +151,10 @@
|
|||
margin-top:30px;
|
||||
margin-bottom:30px;
|
||||
text-decoration: none;
|
||||
text-align: center;
|
||||
}
|
||||
img#icon_coc {
|
||||
width: 80px;
|
||||
width: 120px;
|
||||
margin:10px;
|
||||
}
|
||||
|
||||
|
|
@ -307,9 +308,10 @@
|
|||
overflow-x: visible;
|
||||
margin-top:30px;
|
||||
text-decoration: none;
|
||||
text-align: center;
|
||||
}
|
||||
img#icon_coc {
|
||||
width: 100px;
|
||||
width: 120px;
|
||||
margin:10px;
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue