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>
|
||||
|
|
@ -97,7 +97,7 @@
|
|||
[환대의 조각들]은 사회적 소수자와 소수성을 기반으로 하는 예술 표현을 온오프라인 공간을 통해 실험하는 프로젝트다. 2020년부터 다양한 참여작가들과 함께 '환대'라는 키워드로 각자의 조각들을 모으는 작업을 해왔다. [#000 환대의 조각들]에서는 기획자들 개인을 포함한 19명의 참여자들이 ‘인간, 기술, 환경’이라는 키워드로 새로운 조각을 모은다. 이 프로젝트에서 우리는 우리의 연결을 매개하는 매체의 ‘성질과 태도’를 스스로 선택할 수 있기를 바란다. 따라서 우리의 조각들이 모이는 웹 플랫폼은 우리를 컨트롤 하는 커다란 권력으로부터 가능한 한 멀어지는 방식으로 스스로 제작한다. 우리는 대부분 예술인으로 분류되지만 정규 예술교육을 받지 않았거나 본인을 '예술인'으로 규정하지 않거나 조금 이상해보이는 창작을 지속해온 사람들, 혹은 한번도 창작을 해보지 않은 사람들이기도 하다. 우리가 이렇게 함께 모인 것은 예술이라는 개념에 질문을 던지고 미래의 무언가를 상상하기 위해서다.
|
||||
<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="꽃모양 선언문 버튼">
|
||||
약속문 열어보기
|
||||
약속문 열어보기
|
||||
</a>
|
||||
</p>
|
||||
<p class="col">
|
||||
|
|
@ -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